prerender-spa-plugin预渲染与vue动态路由踩坑

[lizhongzhen11]

我弄了个 blingshow——中国路灯制造网，但是我是用vue+ts写的，写之前没考虑什么SEO等等，以前一直写后台管理系统，直接面向用户的网站只写过一个，就是雀巢桶装水，不过那个是jsp写的，而且记得当初上线前当时的老大让我加了段代码，说是给百度SEO用的，好像花钱的，这次自己独立建个小站，写完后才意识到百度收录、SEO等等问题，这是以前没接触过的，纯给自己埋坑了。

以前也听过预渲染这个名词，不过一直没在意，这次为了解决我网站SEO相关问题，不得不去研究下。好在vue官网直接给了推荐：https://github.com/chrisvfritz/prerender-spa-plugin， 我看了文档才知道，固定的路由比如 /hot, /iot, /traffic 等配置下完全没问题，可是动态路由比如产品详情页（根据产品编号去获取数据）就很难办了。

而且百度SEO要经常更新内容，发外链等等，起初我不懂我的网站怎么更新内容，我路由就那么几个，又不是博客，后来仔细一想，那么多产品，每个产品编号都不同，那么每个产品详情页不就是一个单独的网站吗？

我抱着试一试的心态向百度提交了一堆产品详情页地址，它提示我成功，但是目前没什么感觉。不过我还是不放心，想对这些动态路由进行预渲染，在github仓库里的issue找了很久，其中作者有直接回复 不支持动态路由预渲染，建议ssr 的，但是也不是完全没法子，作者还说可以把 所有动态路由都写出来配置下，这个 chrisvfritz/prerender-spa-plugin#375 回复我一开始没看懂，后来经过我3个小时的摸索，大概这样配置：

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({ // 预渲染
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: [
          '/hot', 
          '/iot', 
          '/street-lighting', 
          '/traffic', 
          '/company', 
          '/login',
          '/productDetail/20200501170342p8O',
          '/productDetail/20200501165752p8O',
          '/productDetail/20200501172222r8y',
          '/productDetail/20200501172416r8y',
          '/productDetail/20200501173238WLk',
          '/productDetail/20200501173606WLk',
          '/productDetail/20200501175355WLk',
          '/productDetail/20200501191542aal',
          '/productDetail/20200501192826r8y',
        ],
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          // Optional - defaults to 0, no limit.
          // Routes are rendered asynchronously.
          // Use this to limit the number of routes rendered in parallel.
          maxConcurrentRoutes: 4,
  
          // Optional - Wait to render until a certain amount of time has passed.
          // NOT RECOMMENDED
          renderAfterTime: 5000, // Wait 5 seconds. 时间设置短的话可能会报错，因为加载数据可能有延迟
  
          // Other puppeteer options.
          // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
          headless: false // Display the browser window when rendering. Useful for debugging.
        })
      })
    ]
  }
}

这样确实生成了相应的html，不过这些页面好像并没有什么差别。

建议

如果是建网站要做SEO等等，还是建议直接 SSR 吧，我打算把我这个网站的国际站用SSR重写下，毕竟我这个站主要做外贸用的。而且我做的是响应式，但是写的不好，我还是将PC和移动分成两个项目来写吧

[sje999]

所以动态传参的动态路由就是没法用预渲染咯，哎。。折腾了2天了。

[yashika]

我也碰巧在思考这个动态路由的解决办法, 谷歌搜到这里的.
我想的是:因为爬虫会反复爬同一个文章, 那么当第一只爬虫来的时候就检测下, 如果没生成静态资源那么我可以用我后端的 koa 执行下 webpack blablabla 命令吐出html. 之后的爬虫再来我 nginx 就能找到静态资源了.
如果这个思路不行就只有转型用 SSR 了.
文章一多, 爬虫一多真要命.