CSR、SSR和SSG

CSR、SSR和SSG是什么

这三个是前端的三种渲染技术，分别是客户端渲染、服务器渲染、静态站点生成，这三种技术在实际开发中很少有人提及，但是他们确实前端架构师选择框架的重要影响因素。

三者区别

CSR（客户端渲染）

• 定义：客户端渲染指的是网页的内容是在用户的浏览器中生成的。浏览器从服务器获取HTML、CSS和JavaScript文件，然后JavaScript在客户端执行，动态生成页面内容。
• 优点：
  • 开发效率高：前后端分离，可以独立开发和部署。
  • 交互性好：可以快速响应用户操作，提供流畅的用户体验。
• 缺点：
  • 首屏加载时间可能较长：需要等待所有资源加载并执行JavaScript后才能显示完整的页面。
  • 不利于SEO：搜索引擎爬虫可能无法正确解析JavaScript生成的内容。

SSR

• 定义: SSR是服务器将所需数据直接填充到html上返回给浏览器

• 优点：

  • 首屏加载快：用户可以更快地看到完整的页面。
  • 有利于SEO：搜索引擎爬虫可以更容易地抓取和索引内容。

• 缺点：

  • 服务器负载增加：每次页面请求都需要服务器进行渲染，可能会增加服务器的负载。
  • 开发复杂度较高：需要处理前后端同构的问题，可能会增加开发和维护的复杂度。

SSG

• 定义：SSG是服务器将所需数据直接填充到html上并生成html静态文件。
• 优点：
  • 极快的加载速度：静态文件可以被缓存，加载速度非常快。
  • 低成本：可以部署在低成本的静态站点托管服务上。
  • SEO友好：搜索引擎爬虫可以轻松抓取静态内容。
• 缺点：
  • 不适合动态内容：对于需要频繁更新的内容，每次更新都需要重新生成静态文件。
  • 交互性较差：如果需要客户端交互，可能需要额外的JavaScript代码来处理。

三者框架举例

• CSR：vue、react、jquery等
• SSR：nuxt、nextjs等以服务器模式运行，注意SSR必须要用nodejs环境运行项目
• SSG: nuxt、nextjs等静态文件生成模式

应用场景

• CSR：适用于需要丰富交互的现代Web应用，如单页应用（SPA）。
• SSR：适用于首屏加载速度和SEO非常重要的应用，如新闻网站或电商平台。
• SSG：适用于内容不经常变动的网站，如个人博客、营销页面或文档网站。

在实际开发中，可以根据项目的具体需求和特点，选择最合适的渲染方式，甚至可以结合使用多种渲染技术，以达到最佳的性能和用户体验。例如，可以使用SSR来渲染首屏内容，然后通过CSR来处理后续的页面交互和数据更新。