React CSR VS SSR

156 阅读2分钟

React CSR(客户端渲染)和 React SSR(服务器端渲染)是两种不同的渲染策略。React CSR 在浏览器中执行,初始加载时间可能较长,但用户交互较为流畅。适用于实时性强、交互复杂的应用。React SSR 则在服务器上生成页面,减少首屏加载时间,有利于 SEO 和初次加载性能。它适合内容驱动的应用,如博客或电商网站。选择合适的渲染方式需根据应用需求、用户体验和性能优化综合考量。

CSR

CSR:Client Side Rendering 客户端渲染

image.png

详细流程:

  1. 浏览器发送请求到服务器
  2. 服务器返回一个html页面,没有任何内容
  3. 浏览器处于白屏状态
  4. 浏览器再次发送多个请求到服务器,分别请求css、图片、js
  5. 服务器响应对应资源
  6. 浏览器开始执行JS
  7. 服务器渲染出可见的页面

缺点:

  1. 浏览器可能长期处于白屏状态
  2. 不利于SEO

SSR

SSR:Server-side rendering 服务端渲染

服务器端呈现(SSR)是一种在web开发中使用的技术,其中web页面在服务器上生成,并作为完全呈现的HTML发送给客户端。这种方法与客户端呈现形成对比,后者是浏览器使用JavaScript构建页面。SSR通过向爬虫提供完整的内容,改善了初始页面加载时间和搜索引擎优化(SEO)。对于内容丰富的站点和需要快速加载第一页的应用程序,它特别有用。SSR可以通过各种框架来实现,比如React的Next.js或Vue.js的Next.js。虽然它可以增加服务器负载和复杂性,但SSR在性能感知方面具有优势,特别是在较慢的设备或网络上,并且可以与初始负载后的客户端水合作用相结合以实现动态交互性。

image.png

详细流程:

  1. 浏览器发送请求到服务器
  2. 服务器返回一个html页面,包含完整的HTML内容
  3. 浏览器显示出页面
  4. 浏览器再次发送多个请求到服务器,分别请求css、图片、js
  5. 服务器响应对应资源
  6. 浏览器开始执行JS
  7. 服务器接管后续渲染

缺点:

  1. 开发缺点相对麻烦