前言

最近一直在搞新项目(vite+ts+vue3)，最近优化网站首页和满足百度SEO搜索引擎,发现由于百度和各个技术社区github上很少有讲到这个新插件，这边分享给大家这个宝藏插件，帮助大家更快更有效的完成任务。在介绍该插件之前，大家首先要明白预渲染是什么，为什么需要用到这个东西。

一. 前端预渲染

前端预渲染（Frontend prerendering）是一种技术，它可以在浏览器渲染 HTML页面之前，将页面预先渲染成静态HTML文件，并将其保存在服务器上。当用户访问网站时，服务器直接提供预先渲染的静态HTML文件，而不是动态生成 HTML 页面。这种技术的优点在于可以大大提高网站的加载速度和搜索引擎优化效果。由于预渲染的 HTML 文件是静态的，可以被搜索引擎轻易地爬取和索引，从而提高网站的搜索排名和可见性。

二. 服务端渲染

服务端渲染（Server-side rendering）是一种将动态生成的 HTML 页面在服务器端进行渲染，然后将渲染后的结果返回给浏览器的技术。与传统的客户端渲染方式不同，服务端渲染可以在浏览器请求页面时直接返回一个已经渲染好的 HTML 页面，而不是返回一个空的HTML模板和一些 JavaScript 代码，在客户端使用 JavaScript 动态生成页面。服务端渲染的优点在于可以大大提高网站的首屏加载速度、搜索引擎优化效果和用户体验。由于页面已经在服务器端渲染，因此页面的内容和结构可以被搜索引擎更好地解析和索引，从而提高网站的搜索排名和可见性。

三. 两者区别

服务端渲染：是服务器动态生成html文件渲染，然后将渲染后的结果返回给浏览器。
缺点：

服务器压力较大：由于需要在服务器端进行渲染，因此服务器的计算和渲染压力比较大。
开发难度较高：服务端渲染需要在后端编写复杂的逻辑和模板代码，开发难度相对较高。
资源浪费：由于每次请求都需要重新生成 HTML 页面，因此服务器资源的浪费比较大。

前端预渲染：是在页面渲染之前生成静态html保存到服务器，用户打开页面后，服务器直接提供预先渲染的静态 HTML 文件。 缺点：

可扩展性较差：由于预渲染的 HTML 页面是静态的，因此对于一些需要动态生成的内容（如用户登录信息、购物车等），预渲染的 HTML 页面无法处理。
更新麻烦：由于预渲染的 HTML 页面是静态的，因此如果需要更新页面内容，就需要重新生成静态 HTML 文件，并将其保存在服务器上，更新起来比较麻烦。
不适合交互较多的场景：由于预渲染的 HTML 页面是静态的，因此对于需要大量交互的场景，如单页应用（SPA），预渲染的效果可能不太好。

四. 实现方式

服务端渲染可以使用各种后端框架和模板引擎来实现：

React：Next.js框架

Vue：Nuxt.js框架

前端预渲染通常使用一些插件来实现：

prerender-spa-plugin（webpack构建工具）

prerenderer

五. prerenderer插件

里面主要有两个包大家可以根据自己项目需求进行选择。

@prerenderer/renderer-jsdom ：使用jsdom，速度快，但不可靠，不能处理高级用法。可能无法与所有的前端框架和应用程序一起工作。
@prerenderer/renderer-puppeteer : 使用puppeteer在无头的Chrome中渲染页面。比之前的ChromeRenderer更简单、更可靠。

本人推荐使用@prerenderer/renderer-puppeteer,简单介绍下如何配置：

如果你和我一样是vite构建请安装如下两个包:

npm i -D @prerenderer/rollup-plugin @prerenderer/renderer-puppeteer

import { defineConfig } from 'vite'
import prerender from '@prerenderer/rollup-plugin'
const prerenderConfig = {
  routes: [
    "/",
    "/about/member",
  ],
  renderer: "@prerenderer/renderer-puppeteer",
  rendererOptions: {
    renderAfterDocumentEvent: "custom-render-trigger",
    // headless: false
  },
  postProcess(renderedRoute) {
    console.log(renderedRoute.route);
    path.join(__dirname, "dist", renderedRoute.route);

    renderedRoute.route = renderedRoute.originalRoute;
    renderedRoute.html = renderedRoute.html
      .replace(/http:/i, "https:")
      .replace(
        /(https:\/\/)?(localhost|127\.0\.0\.1):\d*/i,
        process.env.CI_ENVIRONMENT_URL || ""
      );
  },
};
export default defineConfig({
  plugins: [
    prerender(prerenderConfig),
  ],
});

提示：构建的过程中可能会报错，具体错误信息已经忘记了，大家在要预渲染的页面加上这个报错就会解决： document.dispatchEvent(new Event("custom-render-trigger"));

前端预渲染seo插件

前言

一. 前端预渲染

二. 服务端渲染

三. 两者区别

四. 实现方式

五. prerenderer插件