react預渲染prerender-spa-plugin

前言:

爲什麼使用prerender-spa-plugin？
緣由在於單頁面SPA首頁白屏時間長，不利於SEO優化的問題。
目前主流的解決方案：服務端渲染SSR和預渲染技術prerender-spa-plugin。

使用：

1.咱們默認是建立的create-react-app項目，具體教程百度便可。
2.安裝:

npm install prerender-spa-plugin --save
複製代碼

3.配置：
config-overrides.js中配置：

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;
};
複製代碼

其中的routes就是你想要配置的路由列表。

4.router路由須要採用BrowserRouter,否則打包後每一個頁面都是同樣的預渲染界面。

5。運行npm run build，看一下生成的 dist 的目錄裏是否是有每一個路由名稱對應的文件夾。而後找個 目錄裏 的 index.html 就有預渲染好的dom了。這裏推薦你們一個插件serve，npm install serve ,這樣你輸入命令serve -s dist就能夠啓服務了。很方便。

痛點：

若是沒有設置預渲染的頁面，在刷新頁面後會先閃一下首頁，而後再顯示咱們調轉的路由。此時給你們提供一個思路，就是須要建兩個預渲染頁面a.html（首頁），b.html（loading菊花圖），若是是首頁就跳轉a.html，若是是沒有配置預渲染頁面的就用b.html，這就須要nginx配置了。

參考文獻：

這裏有react,vue,angular的配置：github.com/chrisvfritz…

做者：沐雨芝錄 連接：https://www.jianshu.com/p/5c63c07b51b6 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。