返回

CSR（Client Side Rendering）

前端

CSR、SSR、Prerender 原理全解密

CSR、SSR、Prerender 概述

CSR、SSR、Prerender 都是单页应用（SPA）的渲染方式。SPA 将所有的内容都放在一个 HTML 页面中，然后使用 JavaScript 来动态更新页面内容。

CSR 是传统的单页应用渲染方式。在 CSR 中，页面内容完全由浏览器中的 JavaScript 来生成。当用户访问一个 SPA 时，浏览器会下载 HTML、CSS 和 JavaScript 文件，然后使用 JavaScript 来渲染页面内容。CSR 的优点是速度快，因为页面内容不需要经过服务器端渲染。但是，CSR 的缺点是首次加载页面时可能会很慢，因为浏览器需要下载所有必要的资源。

SSR 是另一种单页应用渲染方式。在 SSR 中，页面内容由服务器端渲染。当用户访问一个 SPA 时，服务器会生成一个完整的 HTML 页面，然后将这个页面发送给浏览器。浏览器收到 HTML 页面后，直接渲染页面内容。SSR 的优点是首次加载页面时速度快，因为浏览器不需要下载所有必要的资源。但是，SSR 的缺点是服务器端渲染可能会很慢，特别是当页面内容很复杂的时候。

Prerender 是介于 CSR 和 SSR 之间的一种单页应用渲染方式。在 Prerender 中，页面内容由服务器端预渲染。当用户访问一个 SPA 时，服务器会生成一个完整的 HTML 页面，然后将这个页面保存到服务器上。当用户访问这个 SPA 时，浏览器会直接从服务器上下载这个预渲染的 HTML 页面。Prerender 的优点是首次加载页面时速度快，而且服务器端预渲染不会影响页面内容的动态性。但是，Prerender 的缺点是服务器端预渲染可能会很慢，特别是当页面内容很复杂的时候。

CSR、SSR 和 Prerender 都是单页应用的渲染方式，每种渲染方式都有自己的优缺点。在选择合适的渲染方式时，需要考虑以下因素：

  • 页面的复杂性 ：如果页面内容很复杂，那么 SSR 或 Prerender 可能更合适，因为服务器端渲染可以减轻浏览器的负担。
  • 页面的动态性 ：如果页面内容很动态，那么 CSR 可能更合适，因为 CSR 可以实时更新页面内容。
  • 页面的首次加载速度 ：如果希望页面的首次加载速度快，那么 SSR 或 Prerender 可能更合适。
  • 服务器的性能 ：如果服务器的性能很好，那么 SSR 或 Prerender 可能更合适。