1混狠、服務(wù)端渲染
仍是SPA
- 路由同步
需要用到 react-router-config 這個(gè)庫原探，它可以根據(jù) route 匹配到對應(yīng)的組件曾棕，拿到當(dāng)前route對應(yīng)的組件是實(shí)現(xiàn)路由同步的關(guān)鍵因块，再通過組件的靜態(tài)API方法獲取接口數(shù)據(jù)
- 狀態(tài)同步
主要是在服務(wù)端通過組件的靜態(tài)API方法獲取接口數(shù)據(jù)后創(chuàng)建store震贵，再通過 window.store= store 傳遞給前端
- 交互同步
主要是要將前端的 js 文件附加在服務(wù)端渲染的模板 html 文件中
服務(wù)端渲染的應(yīng)用場景：一般只是對重要的頁面淹魄，如首頁才會(huì)做郁惜，可以提高首屏加載速度，利于SEO甲锡。其他頁面實(shí)際上仍是CSR
2兆蕉、預(yù)渲染
預(yù)渲染不像服務(wù)器渲染那樣即時(shí)編譯 HTML，它只在構(gòu)建時(shí)為了特定的路由生成特定的幾個(gè)靜態(tài)頁面缤沦，等于我們可以通過 Webpack 插件將一些特定頁面組件 build 時(shí)就編譯為 html 文件虎韵，直接以靜態(tài)資源的形式輸出給搜索引擎。
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變?yōu)镸PA
2、必須使用 History 路由企量，而不能使用 Hash 路由测萎，所以對于沒有做預(yù)渲染的頁面往往需要服務(wù)器配置路由，如nginx 配置如下：
location /{
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
3、對于動(dòng)態(tài)路由，如 /detail/:id建丧，是不支持的，不過可以換成 query 路由腕唧，如/detail?id=
4、應(yīng)用場景比較有限瘾英，能想到的就是骨架屏應(yīng)用四苇，比如首頁，為了速度方咆，我們會(huì)用一些骨架屏組件，如果不做預(yù)渲染蟀架，則骨架屏組件會(huì)等整個(gè)js文件加載完畢才開始渲染瓣赂，體驗(yàn)不好。如果做了預(yù)渲染片拍，則當(dāng)html文件加載完畢時(shí)就會(huì)開始渲染了
