🛠✨ 使用动画揭开 SSR、CSR、通用渲染和静态渲染的神秘面纱

有时，理解不同 Web 渲染解决方案之间的区别可能有些困难。如果你是一名 Web 开发者，你可能听过这样的话：

• 服务器端渲染（SSR）
• 客户端渲染（CSR）
• 通用渲染（有时简化为“SSR”）
• 静态渲染（或 JAMStack，取决于您使用的工具）

这里有 4 个视频，从用户的角度简化解释了每个解决方案的流程。请注意，4 个视频中的用户场景完全相同。

在最后一节中，您将看到每个解决方案的优点和缺点的比较列表。

服务器端渲染（SSR）

⚠️ 注意：这里我指的是完全服务端渲染的网站（也就是老式的 SSR 网站 😉）。这种架构在单页应用出现之前被广泛使用。

客户端渲染（CSR）

使用 CSR 的框架： Vue、React、Angular

通用渲染

使用通用渲染的框架： Nuxt.js、Next.js、Angular Universal

静态渲染

使用静态渲染的框架/工具： Gatsby、VuePress、Gridsome、Next.js、Hugo、Jekyll

比较

如果您有任何问题，请随时通过Twitter联系我！