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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://juejin.im/post/5cd2932cf265da03937880cd