预渲染与服务端渲染（SSR）

梦旅ya

已于 2023-07-22 15:20:06 修改

阅读量1.2k

点赞数 1

分类专栏：前端文章标签：搜索引擎前端 javascript

于 2023-07-22 15:19:06 首次发布

本文链接：https://blog.csdn.net/weixin_62992614/article/details/131868259

版权

前端专栏收录该内容

19 篇文章

订阅专栏

一、什么是SEO

SEO（Search Engine Optimization，搜索引擎优化）是一系列技术和策略的集合，通过优化网站和其内容，以及提供良好的用户体验，旨在提高网站在搜索引擎中的排名，从而增加有机（非付费）流量和提升网站的可见性。

搜索引擎优化的目标是使网站在搜索引擎结果页（SERP）中的排名更靠前，从而提高网站的曝光度和点击率。随着人们对信息的获取逐渐依赖搜索引擎，拥有较高的搜索引擎排名变得越来越重要。

简单来说是用户的网站更容易被搜索引擎爬取到，以提升网站再搜索引擎的排名。

为了实现SEO，需要考虑以下几个方面：

关键词优化：通过研究和选择与网站主题相关的关键词，并在页面的标题、内容、URL、标签等位置合理地使用这些关键词，以提高页面在搜索引擎中的排名。
内容优化：创建高质量、有价值的内容，使其对目标受众有吸引力，并且容易理解和分享。优化页面结构、格式、标签和元数据等，以确保搜索引擎正确解读和理解页面内容。
网站结构优化：优化网站的导航结构、URL结构和网页内部链接等，以便搜索引擎可以轻松地抓取和索引网站的内容。
外部链接建设：通过获得高质量的外部链接（外部引用）来增加网站的权威性和可信度。这可以通过与其他相关网站建立合作关系、参与行业内的论坛和社区等方式实现。
网站技术优化：确保网站在技术层面上良好地配置和优化，包括网站速度优化、安全性、移动友好性、可访问性等。这包括压缩图像、使用CDN（内容分发网络）、优化代码等。

SEO不仅仅是一次性的任务，而是一个持续的过程。随着搜索引擎算法的不断变化和用户行为的演变，需要不断地进行监测、分析和优化，以确保网站能够保持良好的搜索引擎排名和流量。

二、预渲染

预渲染（Prerendering）是指在网页加载前，事先生成静态HTML内容。它是一种优化技术，通过在服务器或构建阶段提前生成网页的完整HTML，然后将其缓存或保存下来，当用户请求该页面时，直接返回静态HTML，而无需再进行客户端渲染。

预渲染可以应用于单个页面或整个网站，通常用于以下情况：

静态内容：如果网页内容很少或较为静态，并且不需要频繁地更新，可以在构建阶段生成静态HTML，以提供更快的初始加载时间和更好的用户体验。
首次加载速度：对于一些需要复杂计算或大量数据处理的页面，预渲染可以在服务器上预先生成HTML，从而减少客户端渲染的时间，加快页面的首次加载速度。
搜索引擎优化（SEO）：预渲染生成的静态HTML可以被搜索引擎直接解析和索引，提高网页在搜索结果中的可见性和排名，从而增加网站的有机流量。
前端框架优化：一些前端框架（如React、Vue等）通常需要在浏览器中进行客户端渲染，但对于某些情况下，预渲染可以减少客户端渲染的工作量和时间，提高页面的加载速度。

预渲染的实现方式可以基于现有的构建工具或使用专门的预渲染工具。预渲染的缺点是增加了服务器的负担，因为需要提前生成和存储大量的静态HTML文件。同时，预渲染也可能无法适应某些动态内容或需要经常更新的网页。因此，在决定是否使用预渲染时，需要综合考虑网页的特点、需求和可行性。

在 Vue 中使用预渲染

在 Vue CLI 和 Vite 中，你可以通过使用预渲染插件或工具来实现预渲染。

Vue CLI：

使用 Vue CLI 创建一个新的项目：vue create my-project。
安装 @vue/cli-plugin-prerender 插件：vue add prerender.
在 vue.config.js 文件中配置预渲染的路由和其他选项：

module.exports = {
  pluginOptions: {
    prerenderSpa: {
      registry: undefined,
        renderRoutes: ["/", "/about", "/contact"], // 配置需要预渲染的路由
        useRenderEvent: true,
        headless: true,
        onlyProduction: true
    },
  },
};

运行预渲染命令：npm run prerender 或 yarn prerender。
预渲染后的静态 HTML 文件将生成到项目的 dist 目录中。

Vite：

创建一个新的 Vite 项目：npm init vite@latest my-project，选择 Vue 作为模板。
安装 vite-plugin-prerender 插件：npm install vite-plugin-prerender --save-dev.
在 vite.config.js 文件中配置预渲染的路由和其他选项：

import { defineConfig } from "vite";
  import { createVuePlugin } from "vite-plugin-vue";
  import prerender from "vite-plugin-prerender";

  export default defineConfig({
    plugins: [
      createVuePlugin(),
      prerender({
        renderRoutes: ["/", "/about", "/contact"], // 配置需要预渲染的路由
        crawler: "puppeteer",
        staticDir: "dist",
      }),
    ],
  });

执行 Vite 开发服务器：npm run dev 或 yarn dev。
在生产构建时，预渲染将自动执行：npm run build 或 yarn build。
预渲染后的静态 HTML 文件将生成到项目的 dist 目录中。

需要注意的是，预渲染针对的是静态页面，对于需要动态数据的页面，预渲染的效果可能有限。在配置预渲染时，要确保预渲染的路由和内容是静态的且不依赖于客户端数据。如果有动态的内容，可以通过异步请求或其他技术手段在客户端进行渲染。

另外，预渲染的设置还可能因为具体项目的需求和插件的版本而有所差异，请参考官方文档和插件的具体说明进行配置。

优缺点

预渲染的优点：

更好的初始加载性能：预渲染将页面在服务器端或构建阶段生成为完整的静态 HTML，用户访问时直接返回静态页面，减少了客户端渲染时间，提供更快的初始加载速度。
更好的搜索引擎优化（SEO）：由于搜索引擎可以直接解析和索引静态 HTML 页面，预渲染可以提高网页在搜索引擎结果中的可见性和排名，增加有机（非付费）流量。
更好的用户体验：预渲染可以提供快速的页面响应和导航体验，减少用户等待时间，提升整体的用户体验。
更佳的兼容性：预渲染将页面渲染为静态 HTML，不依赖于客户端的特定浏览器或设备，从而提供更好的跨浏览器和跨设备的兼容性。

预渲染的缺点：

预渲染需要提前生成和存储大量的静态 HTML 文件，因此可能会占用更多的服务器存储空间。
预渲染对于动态内容或需要频繁更新的页面可能不适用。如果页面内容需要根据用户请求或其他动态数据来生成，预渲染将无法保持内容的实时性和动态性。
预渲染的配置和实施可能需要一些额外的工作，特别是在复杂的项目或使用特定框架时，可能需要配置插件或编写一些自定义代码。
对于大型项目或页面数量众多的网站，预渲染可能会导致构建时间增加，因为需要生成大量的静态 HTML 文件。

需要综合考虑项目的需求和实际情况，权衡预渲染的优势和劣势。对于对初始加载性能、SEO 和用户体验有较高要求的静态页面，预渲染可能是一个有价值的优化技术。对于依赖动态数据和实时内容的页面，或者在时间和资源限制下，预渲染可能不适合。

三、服务端渲染（SSR）

服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成并返回完整的渲染好的 HTML 页面，而不是将页面的渲染任务交给客户端的浏览器来完成。在服务端渲染中，服务器会预先处理页面的数据和模板，将其编译成 HTML 页面，然后将这个完整的 HTML 页面发送给客户端进行展示。

这与传统的客户端渲染（Client-Side Rendering，CSR）方式不同，传统的客户端渲染是将初始的 HTML 模板发送给客户端，然后在客户端的浏览器中通过 JavaScript 来动态生成和渲染页面内容。

服务端渲染的优点包括：

更快的首次渲染：由于服务端在接收到用户请求后就可以直接生成完整的 HTML 页面，这样用户在浏览器中首次加载页面时会获得更快的渲染速度，从而提供更好的用户体验。
更好的 SEO：由于搜索引擎可以直接解析和索引服务端渲染生成的 HTML 页面，而不依赖于 JavaScript 的执行和内容抓取，因此服务端渲染有助于提升网页在搜索引擎结果中的可见性和排名。
更好的内容分享：由于服务端渲染生成的 HTML 页面已包含所有内容，包括前端路由的不同页面状态，这样可以提供更准确和可共享的内容链接，方便用户分享和搜索引擎索引。
更好的性能和可访问性：服务端渲染可以减轻客户端的负担，尤其在低性能的设备或慢速网络环境下，用户可以更快地加载和浏览页面，提高整体性能和可访问性。

然而，服务端渲染也有一些限制和挑战：

服务器负载增加：由于服务端需要在请求时动态生成和返回页面，这意味着服务器的负载会增加，特别是在高并发或大规模网站中。
管理状态和前端逻辑：服务端渲染在将页面交给客户端之前已经执行了页面渲染，导致一些前端逻辑和状态管理的挑战，需要确保在页面的交互过程中能够正确处理和同步客户端和服务器之间的状态。
构建和调试困难：服务端渲染通常需要额外的配置和工具支持，构建和调试过程可能更加复杂，特别是对于复杂的应用程序或使用特定框架的情况。

总体而言，服务端渲染是一种强大的技术，可以提供更好的初始加载性能、SEO 和用户体验。然而，在使用服务端渲染时，需要权衡其带来的好处和额外的复杂性，并根据项目需求和限制做出合适的选择。

四、总结

预渲染和服务端渲染都是实现服务端渲染（Server-Side Rendering，SSR）的方法，它们在一些方面有所不同：

预渲染（Prerendering）是在构建时生成静态 HTML 页面，这些页面在每个路由的请求时直接提供给客户端。与服务端渲染相比，预渲染的主要区别在于它不是在每个请求时动态生成 HTML 页面，而是在构建过程中生成预先渲染好的静态页面。

预渲染和服务端渲染的比较：

构建：预渲染在构建时生成静态页面，服务端渲染是在每个请求时动态生成页面。
服务器负载：预渲染可以减轻服务器的负载，因为静态页面不需要服务器动态处理。而服务端渲染需要服务器在每个请求时处理和渲染页面。
数据获取：预渲染对于静态数据获取非常适用，因为在构建时可以通过预先获取数据并渲染静态页面。而服务端渲染更适合动态数据获取，它可以在每个请求时根据请求数据生成动态页面。
SEO：预渲染对于搜索引擎优化（SEO）有很大的帮助，因为它提供了静态 HTML 页面，可以被搜索引擎轻松索引。而服务端渲染也能提供有利于 SEO 的页面，但可能需要更多的配置和处理。
初始加载速度：由于预渲染生成的页面是完全静态的，因此它们的初始加载速度很快，用户可以立即看到内容。而服务端渲染会在每个请求时动态生成页面，初始加载速度可能稍慢一些。

综上所述，预渲染和服务端渲染都有各自的优势和适用场景。预渲染适合静态内容和无需每个请求都生成动态页面的场景，可以提供快速的初始加载和良好的 SEO。而服务端渲染更适合动态内容和需要每个请求都进行数据获取和渲染的场景，可以提供更好的动态交互和个性化体验。

具体选择哪种渲染方式取决于项目需求、性能要求和团队技术栈。有时候，预渲染和服务端渲染也可以结合使用，以兼顾两者的优势。