同构实践模板

同构优点

• SEO
• 前后端同一份代码
• 更高的性能(最后的优化)

同构的本质

1. 将服务端的代码(包含组件)渲染到页面;
2. 当客户端组件加载好后替换掉服务端的组件;

实践

针对一些首屏用到的数据，可以在服务端将获取的数据存进 window 字段，传给客户端，这样可以避免服务端、客户端重复调用接口。

Usage

yarn build
yarn start

打开 localhost:8080，可观测到如下两点：

1. 在 view-source:http://localhost:8080/ 中可以看到服务端返回的代码
2. 在 React 开发者工具中可以看到客户端的组件