前端页面渲染方式 csr、ssr、ssg 总结于对比

我们经常用的普通的网页应用使用的是 csr ,就是客户端渲染，这种渲染方式不利于seo搜索引擎优化，所以有的时候我们选择服务端渲染，就是适用 nuxt、next等服务端渲染框架，一般做官网我们就适用服务端渲染，

但是除了这两个还有一个是 ssg，就是静态站点生成，也是对 seo 比较友好的，再nuxt 的框架下使用 nuxt generate 就是 ssg 的形式。

1. 服务器端渲染 (SSR) Server-Side Rendering：

   • 服务器端渲染是指在服务器上动态生成完整的 HTML 页面，并将其发送给浏览器。用户访问页面时，浏览器会直接接收到已渲染好的 HTML 内容。
   • SSR 可以改善首屏加载时间、有利于搜索引擎优化（SEO）以及提高性能。

2. 客户端渲染 (CSR) Client-Side Rendering：

   • 客户端渲染是指在浏览器中使用 JavaScript 来动态生成页面内容。初始 HTML 通常只包含基本的结构和引用到的资源，而实际内容是通过 JavaScript 渲染的。
   • CSR 可以提供更丰富的交互体验，但首屏加载可能较慢，不利于 SEO。

3. 静态站点生成 (SSG)：

   • 静态站点生成是一种在构建时预先生成整个网站的静态文件的方法。这些文件可以包含所有页面内容，包括基本的 HTML、CSS、JavaScript 和数据。
   • SSG 可以带来更快的页面加载速度、更好的安全性以及更低的服务器负载。适用于内容不经常更新且需要高性能的网站。