web前端渲染技术

web前端现在主要有三种渲染技术：客户端渲染（CSR）、服务器渲染（SSR）、静态站点生成（SSG）

客户端渲染（CSR）

主要形式就是单页面应用（SPA），服务器返回一个基本的 HTML 页面结构和一些必要的 JavaScript 和 CSS 文件。然后，客户端的浏览器通过执行 JavaScript 代码来请求数据，并根据数据动态生成页面内容。这种模式下，页面的渲染过程主要由客户端的浏览器完成，可以实现更丰富的交互和动态内容。

• 优点：
  开发简单：现代前端开发框架和构建工具几乎都支持CSR, 可以开箱即用的构建CSR应用。可以应用丰富的前端生态，无需担心兼容问题。
  部署简单：前端只需要提供静态文件。
  服务器无压力：渲染是在客户端进行，服务器无需进行渲染计算，只需提供静态文件。
• 缺点：
  对SEO不友好：服务器只返回一个空白的html文件

技术选型:
vite Rsbuild 等现代化的前端构建工具都能开箱即用的生成CSR应用。

服务器渲染（SSR）

服务器在接收到客户端请求后，会将页面的初始 HTML 内容生成并发送给客户端。客户端接收到 HTML 后，进行解析和渲染，最终呈现给用户。这种模式下，页面的大部分内容在服务器端已经渲染完成，因此页面加载速度相对较快，并且对搜索引擎友好。

• 优点:
  对SEO友好：客户端拿到的就是渲染好的页面
• 缺点：
  服务器压力大：需要在服务器端进行渲染计算
  开发复杂：需要在服务器端和客户端进行不同的处理和逻辑，开发和维护的复杂度相对较高
  部署复杂：需要在服务器上运行代码，需要node环境。

技术选型:
Next.js Nuxt.js

静态站点生成（SSG）

在构建时渲染完整静态网页，部署时只需将静态网页放置在服务器或者对象存储内，可以被CDN缓存，有利于SEO。使用于对对 SEO 要求较高，又不需要动态更改内容的网站。

技术选型：
Next.js