携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲。
欢迎小伙伴们加我微信：
sudongyuer拉你进群，一起讨论，期待与大家共同成长🥂。
NextJs 是一个非常流行的 React 框架，其中一个优美的特性是能够使用不同的呈现技术构建 Web 应用程序，例如
- 客户端渲染 CSR
- 服务器端渲染 SSR
- 静态站点生成 SSG
- 增量静态再生 ISR
客户端渲染CSR
这就是大多数 Web 框架(如 Angular 和 React)开箱即用的支持。这通常适用于单页应用程序(SPA)和具有大量用户交互(如游戏)和高度动态内容(如表单和聊天应用程序)的应用程序。
基本上 web 浏览器最初会加载一个空的 HTML 文件。然后加载的 Javascript 和样式负责在客户端渲染页面
服务器端渲染SSR
CSR 的主要缺点是它SEO不好。因此，大多数的 Web 框架，也提供了在服务器上呈现页面的能力。
与 CSR 不同的是，每个页面都会向 AppServer 发起一个请求，然后在 AppServer 中动态呈现并为该页面提供完整的 HTML。因为每次用户请求时，它都会请求并呈现页面，所以页面服务时间比 CSR 应用程序要长。（需要服务端有比较好的性能）
静态网站生成SSG
为了避免在每个请求中渲染，为什么我们不在构建时生成这些文件，这样我们就可以在用户请求时立即为页面提供服务。
如果您想要构建一个充满静态内容(如 blog)的 Web 应用程序，这种技术将非常方便。一个缺点是内容可能过时，每次更改内容时都需要构建和部署应用程序。(在 CMS 中)
增量静态再生ISR
ISR 是 SSG 的下一个改进，它定期构建和重新验证新页面，以便内容永远不会过时。
比较
为了比较这四种技术，我们将考虑以下指标。
- 构建时间-值越少越好。
- 适用于动态内容-如果这个值很高，那么该技术更适合于具有大量动态内容的应用程序。
- 搜索引擎优化-大多数情况下，最好是有一个良好的搜索引擎优化价值。
- 页面服务/渲染时间-在网页浏览器中渲染整个页面需要多长时间。值越低越好。
- 最新内容-表明它总是提供最新的内容。值越高越好。
- 静态服务器/应用程序服务器-这种技术是否需要一个静态服务器或应用程序服务器。通常，静态服务器消耗的资源要比应用服务器少得多。
一些关键点
- 与 SSR 相比，Page Serve/Render Time 在 CSR 中的使用时间更短，因为在初始资产加载之后，CSR 可以非常快速地加载其余页面。但在 SSR 中，每个页面请求都将由应用服务器提供。
- 与 SSG 相比，页面服务/渲染时间在 ISR 中更长，因为 ISR 定期从服务器请求更新的页面。
- ISR 没有最新的内容，因为有一个小窗口时间，用户可以在定期内容刷新之前获得过时的内容。
结论
在 Highlevel 中，我们可以根据应用程序的动态交互级别将这些渲染技术分为两大类。
- CSR 和 SSR 可用于开发高度动态的 Web 应用程序，根据场景的不同，它们各有优缺点。
- 如果您有一个高度静态的内容，您可以使用 SSG 或 ISR。ISR 更先进和优化，但它需要特定的平台才能工作。
参考
结束语🦚
那么我的CSR、 SSR、 SSG 和 ISR 的权衡这篇文章结束了，文章的目的其实很简单，就是对日常工作的总结和输出，菜不菜不重要，但是热爱🔥，也希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步🐟。
github🤖:sudongyu
个人博客👨💻:速冻鱼blog
vx👦:sudongyuer
写在最后
伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。
加我微信：sudongyuer，邀你进群，一起学习前端，成为更优秀的工程师～（群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论，我会把最新的二维码放在评论区，当然也可以加我微信我拉你进群，毕竟我也是有趣的前端，认识我也不赖🌟
