1、服务端渲染
仍是SPA
- 路由同步
需要用到 react-router-config 这个库,它可以根据 route 匹配到对应的组件,拿到当前route对应的组件是实现路由同步的关键,再通过组件的静态API方法获取接口数据
- 状态同步
主要是在服务端通过组件的静态API方法获取接口数据后创建store,再通过 window.store= store 传递给前端
- 交互同步
主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中
服务端渲染的应用场景:一般只是对重要的页面,如首页才会做,可以提高首屏加载速度,利于SEO。其他页面实际上仍是CSR
2、预渲染
预渲染不像服务器渲染那样即时编译 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件,直接以静态资源的形式输出给搜索引擎。
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = (config, env) => {
if (env === 'production') {
config.plugins = config.plugins.concat([
new PrerenderSPAPlugin({
routes: ['/','/home'],
staticDir: path.join(__dirname, 'build'),
}),
]);
}
return config;
};
1、SPA变为MPA
2、必须使用 History 路由,而不能使用 Hash 路由,所以对于没有做预渲染的页面往往需要服务器配置路由,如nginx 配置如下:
location /{
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
3、对于动态路由,如 /detail/:id
,是不支持的,不过可以换成 query 路由,如/detail?id=
4、应用场景比较有限,能想到的就是骨架屏应用,比如首页,为了速度,我们会用一些骨架屏组件,如果不做预渲染,则骨架屏组件会等整个js文件加载完毕才开始渲染,体验不好。如果做了预渲染,则当html文件加载完毕时就会开始渲染了
网友评论