Skip to content

[toc]

一、CSR(客户端渲染)

CSR(Client-Side Rendering)是一种在浏览器端生成页面的技术。

工作原理

  1. 用户请求页面。
  2. 服务器发送最小 HTML 结构及 JavaScript 和 CSS 文件。
  3. 浏览器加载并执行 JavaScript,动态获取数据并渲染页面。

优点:

  1. 响应速度快:一旦HTML文件加载完成,浏览器就可以开始渲染页面,而不需要等待服务器返回完整的渲染结果。
  2. 动态性强:由于页面渲染在客户端进行,因此可以方便地实现各种动态交互效果。
  3. 前端部署简单:只需要一个静态服务即可部署前端代码,降低了部署成本。

缺点:

  1. 首屏加载时间长:由于需要加载整个JavaScript包,可能导致首屏加载时间较长,特别是对于复杂的单页应用(SPA)。
  2. 不利于SEO:搜索引擎爬虫可能无法很好地解析由JavaScript动态生成的页面内容,导致SEO效果较差。
  3. 白屏时间:在JavaScript代码加载和执行期间,用户可能会看到空白的页面,即所谓的“白屏时间”。

二、SSR(服务器端渲染)

SSR(Server-Side Rendering)是一种在服务器上生成完整 HTML 页面的技术。

工作原理

  1. 用户请求页面。
  2. 服务器获取数据并生成 HTML。
  3. 服务器将完整的 HTML 页面发送给浏览器。
  4. 浏览器显示页面内容,同时下载和执行 JavaScript 和 CSS 文件。

优点:

  1. 首屏加载速度快:由于服务器已经生成了完整的HTML页面,因此客户端可以直接显示这个页面,无需等待JavaScript加载和执行。
  2. SEO友好:搜索引擎爬虫可以很好地解析由服务器生成的HTML页面内容,有利于SEO优化。
  3. 适合复杂页面:对于包含大量数据、需要复杂计算的页面,SSR可以更好地处理并减少客户端的负载。

缺点:

  1. 服务器压力大:对于每个请求,服务器都需要重新渲染页面,这可能导致服务器压力过大。
  2. 开发限制:SSR要求开发者在编写Vue组件时,需要考虑到服务器端和客户端环境的差异,不能过度依赖客户端环境。
  3. 调试困难:SSR的调试过程相对复杂,需要同时考虑到服务器端和客户端的日志和错误信息。

三、SSG(静态站点生成)

SSG(Static Site Generation)是一种在构建阶段生成静态 HTML 文件的技术。

工作原理

  1. 在构建阶段,所有页面被预渲染为静态 HTML 文件。
  2. 用户请求页面时,服务器直接返回预渲染的 HTML 文件。

优点:

  1. 性能卓越:由于页面是静态的,因此无需等待服务器渲染,直接由浏览器加载显示,具有出色的性能。
  2. 安全性高:由于服务器只提供静态文件,因此降低了遭受攻击的风险。
  3. 适合内容型网站:对于内容更新不频繁的内容型网站(如博客、文档网站等),SSG是一个很好的选择。

缺点:

  1. 动态性受限:由于页面是静态的,因此难以实现复杂的动态交互效果。
  2. 构建时间长:对于大型站点,构建时间可能会比较长。
  3. 不适合频繁更新:对于需要频繁更新数据的网站,SSG可能不太适合,因为每次更新都需要重新构建并部署整个网站。