CSR, SSR, SSG分析

CSR, SSR, SSG分析

前端开发中有三种渲染技术,分别是CSR(客户端渲染)、SSR(服务端渲染)、SSG(服务端静态站点生成)。

我们根据具体需求的不同来使用不同的技术。

CSR(客户端渲染)

CSR是目前前端开发中最常用的渲染方式。

CSR渲染方式下,服务端提供给客户端静态html文件、css文件、js文件等,客户端获取到文件后在客户端渲染。

CSR的优点

  1. 响应速度快:浏览器在html加载好后就可以渲染页面,无需等待各种接口请求的结果。
  2. 交互性好:因为页面的大部分处理逻辑在客户端执行,所以可以提供更加动态和交互性的用户体验。
  3. 服务器压力小:因为渲染是在客户端进行的,而服务端只需要提供数据接口,所以服务端压力小。
  4. 容易跨平台开发:CSR的逻辑主要是在客户端,所以可以更容易开发跨平台的应用。
  5. 部署简单:只需要部署build出来的代码即可。

CSR的缺点

  1. 首屏加载时间长:因为需要下载很多静态文件,会导致首屏加载时间长,可能会出现白屏。
  2. 不利于SEO:由于数据是在客户端渲染的,所以不利于搜索引擎爬取页面内容。

SSR(服务端渲染)

SSR是在服务端渲染页面的技术。

SSR的渲染方式下,服务端收到客户端的请求后会根据用户请求的页面和数据来渲染完整的页面,然后将渲染好的页面返回给客户端,客户端直接渲染完整的页面。

SSR的优点

  1. 首屏加载速度快:由于页面由服务端渲染完成了,所以客户端直接拿来渲染即可。
  2. 利于SEO:由于页面以及数据已经在服务端渲染好了,所以搜索引擎爬取时就可以获取到完整的页面,利于SEO。
  3. 降低了客户端负载:由于渲染是在服务端完成的,客户端没有了渲染压力,降低了客户端负载,负载从客户端转移到了服务端。
  4. 更安全:客户端不直接操作数据,所以减少了客户端可能得安全风险。
  5. 更好的可访问性:SSR确保了网页的内容对于无法执行js的用户依然可以访问,提高了站点的可访问性。

SSR的缺点

  1. 服务端负载大:服务端承担了页面渲染的工作,导致了服务端负载上升。
  2. 开发变得复杂:SSR需要考虑组件在客户端和服务端的运行,导致了开发变得复杂。
  3. 不适用于动态内容页面:对于频繁更新的页面,SSR不适合。

SSG(服务端静态站点生成)

SSG是在构建项目时生成静态站点的技术。

SSG方式下,我们需要编写模板文件以及数据文件,然后在构建时将这些文件转为静态的页面文件,这些页面文件会被部署到服务器上,用户在请求这些页面的时候会直接返给用户这些提前生成的页面文件而无需实时生成。

SSG的优点

  1. 性能好:此时用户请求页面后,服务端直接返回给客户端提前生成好的页面文件,故而速度很快。
  2. 安全性好:服务端只提供静态文件,故而降低了安全风险。
  3. 容易部署:SSG最终生成的是静态文件,所以很容易部署。
  4. 适合静态网站:SSG适合不经常更新的网站。
  5. 利于SEO:由于页面以及数据已经在服务端渲染好了,所以搜索引擎爬取时就可以获取到完整的页面,利于SEO。

SSG的缺点

  1. 动态性不好:页面是静态生成的,故而不好实现复杂的动态交互。
  2. 构建时间长:大型站点构建时间可能很长。
  3. 不适合动态内容:频繁更新会消耗服务端大量的资源(构建)。

评论