预渲染问题记录

预渲染问题简要说明

项目背景：项目偏静态，页面已经基本定型，需要侵入性较小的改动，因此预渲染方案没有选择next.js进行SSR，而选择了 prerender-spa-plugin，一种在打包时会在打包环境下，把你的SPA应用的所有页面跑一遍，并且生成对应页面的html（如果是要请求接口才生成的Dom他不会提前生成），在访问页面时会直接给你对应的html，这样就能预先看到渲染出的页面。

样式：选用style-Componment和less

问题：刷新页面会出现两次渲染，且第一次渲染使用style-Component编写的组件样式没有渲染上

第一次渲染样式不正常效果如下：

然后让我们打开Chrome的timeLin看一下火焰图：

可以看到html被渲染了两次，因此到此我们现在可以猜测是html渲染多次导致了这个问题

但是我们在打开一个React编写的页面，你会发现Html也会像这个火焰图一样渲染两次

到此我们又多出了一个疑问，目前总共有两个疑问
1、为什么正常的React页面只会刷新一次呢？
2、为什么第二次渲染后我们的页面样式才正常

我们先看第二个问题，去插件官网点开issue和文档


我们可以发现他并不推荐将我们的样式js执行后注入，style- component + pre-rendered-spa-plugin并不是最佳组合。
他的大致原理是：在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（google官方的headless 无头浏览器）访问指定的页面route，得到相应的html结构，并将结果输出到指定目录，过程类似于爬虫。由于我们使用style-Component，样式其实都是在js脚本中等待写入的，因此爬虫无法爬到对应的css结构，导致样式加载异常，因此解决这个问题，把样式全部改为正常的index.module.less引入即可