React、Vue、Angular 实现SSR 预渲染 SEO优化

当我们使用React、Vue、Angular这些客户端渲染框架时，他们都有一个共性，都是在客户端进行解析js来渲染我们的DOM，但这样会有几个问题！

• “首屏渲染白屏问题”，初次请求到html、css和js时，他还需要在客户端浏览器进行解析的过程才能拿到真正的DOM，这样就会导致先请求到基础的html(也就是我们public文件夹中的index.html文件)，其中的id为root(React)、app(Vue)标签中没有内容导致的白屏现象。
• “SEO问题”，就像百度的检索爬虫时，他是不能像谷歌一样就检索时就会执行js解析我们的关键字，百度的检索只会拿到我们的html，这样就会导致我们页面中的很多文字不会被百度检索到，从而SEO效果非常差

此处我们可以使用prerender-spa-plugin插件在打包时就可按路由打包为一个个html文件

npm install prerender-spa-plugin -D

此处有一个坑，因为本人webpack是5*版本，使用此插件是会报错，如果和我一样的版本可使用@dreysolano/prerender-spa-plugin作为替换

npm install @dreysolano/prerender-spa-plugin -D

主要在webpack.config.js中做修改

在 plugins 中添加以下代码

// 先导入
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');

//在 plugins 中添加以下代码
 new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, '../build'),
        // 此处添加路由，它会根据路由打包出一个个文件夹
        routes: [
          '/',
          'home'
        ]
  }),

打包后都是以路由命名的一个个文件夹，其中是html文件，文件中有html和css，正常部署在服务器上即可。

前端部署项目