在Web开发中，有太多的缩写和首字母缩略语，很难理解上。SSR会影响我的CWV吗？要创建REST API需要多少HTTP方法？SPA使用CSR吗？我真的需要CPR！
不要担心，我来帮你。让我们分解Web的渲染和首字母缩略语，让你得到一些急需的休息和放松。
什么是渲染？
渲染是生成HTML标记以在浏览器中显示网页的过程。渲染过程的方式，尤其是在哪里发生，可能对用户体验、网站性能和搜索引擎优化（SEO）产生重大影响。
渲染的类型
让我们看一看现代Web上可用的不同类型的渲染，以及它们最适合的站点、页面和数据类型。
静态渲染
在Web的早期，所有网站都是静态站点——手写HTML文件的集合存储在服务器上，最可能是通过FTP客户端上传的，并直接提供给用户在他们的Web浏览器中使用。静态渲染仍然是今天使用的一个很好的选择，特别适合于提供单个HTML文件的站点，如单个内容落地页。不需要服务器计算——所以您的页面将加载快。而且一个单独的HTML文件非常容易在Netlify上托管，通过连接Git存储库或通过Netlify Drop上传。🫳🎤这是我之前创建的一个。
服务器端渲染（SSR）
随着Web的发展，出现了更大的站点和更动态的体验的需求，从而出现了服务器端渲染（SSR）的崛起。SSR是一种渲染方法，其中Web页面在请求时在服务器上构建。
- 在浏览器中键入Web地址
- 提交请求
- 该请求传输到固定位置的服务器，在那里服务器处理请求，实时构建Web页面，并将其作为HTML文档发送回浏览器。
SSR 仍然是当今 Web 上最常见的渲染方法，是应用框架（如 WordPress）和大型单体技术堆栈的默认选择。历史上，SSR 需要持续运行的托管服务器，这通常会带来一些不必要的维护、扩展和安全方面的负担。幸运的是，现代前端 JavaScript 框架（如 Astro、Next.js、Remix、Nuxt 和 Gatsby）现在提供了使用最新的 Web 开发平台（如 Netlify）通过底层使用无服务器函数来进行 SSR 的配置选项。
SSR 最适合用于包含实时动态数据的页面，例如产品库存水平或价格（如果您正在构建电子商务网站）或个性化页面，例如用户登录到任何网站上的账户。
SSR 的缺点是潜在的延迟更长。服务器通常存在于固定的地理位置。原始请求离源服务器越远，请求返回到浏览器的时间就越长。如果您的网站在 3G 或 4G 连接的智能手机上查看，则请求可能需要更长的时间。
客户端渲染 (CSR)
客户端渲染（CSR）是使用 JavaScript 在浏览器中呈现内容的过程。当请求的是使用 CSR 的网页时，服务器会发送回一个占位符 HTML 文档和一个将渲染页面的其余部分并填充浏览器中的 JavaScript 文件。
随着 JavaScript 在 1990 年代末在浏览器中的主流采用，CSR 越来越受欢迎。随着 Single Page Application (SPA) 前端框架技术（如 React、Angular 和 Vue）的发展，它的地位作为 Web 生态系统的核心组件进一步得到了巩固。与 SSR 类似，CSR 最适合动态实时数据，但它也有一些缺点。
使用 CSR 的页面上可能需要处理数百兆字节的 JavaScript，因此您的网站可能加载和显示数据很慢。此外，缓慢的互联网速度、旧设备、网页复杂性的增加、有缺陷的浏览器插件或浏览器中没有 JavaScript 等组合都表明要谨慎使用 CSR。
此外，CSR 对 SEO 不是很理想。大多数搜索引擎只能爬取从 URL 返回的内容，而不能爬取在浏览器中可能发生的结果。如果您使用 CSR 来呈现整个网站，则搜索引擎只能阅读您的占位符内容，而不是最终由 JavaScript 加载的丰富内容。
静态站点生成 (SSG)
静态站点生成（SSG）是预先生成HTML页面的过程，以便在不需要服务器端渲染（SSR）或客户端渲染（CSR）的情况下立即向用户提供服务。在2010年代中期，静态站点生成器工具（如Jekyll）的流行崛起，允许开发人员在构建过程中从模板生成任意数量的静态HTML文件。不再需要手工制作耗时的单个HTML文件来获得静态渲染的好处了，太好了！
随之而来的是，您可以从内容交付网络（CDN）（如Netlify的CDN）提供网站，该CDN从最接近请求的服务器节点位置提供静态文件和资产，使您的网站非常非常快速。此外，由于您的网站页面被预先生成为包含实际内容的完整HTML文件，因此您将获得更多的SEO积分。
当今Web生态系统中有数百个静态站点生成器，允许您使用（可能是）您心爱的任何编程语言构建静态站点，包括JavaScript、Go、Ruby、Python、PHP和Rust等。在Jamstack.org上查看大量静态站点生成器列表。
SSG是最适合不经常更改的内容站点和页面的呈现方法。博客、作品集、文档站点和信息内容都是SSG的绝佳用例。要更新内容，请触发站点的重新构建，新预生成的资产将在构建过程完成后准备好从CDN提供服务。
增量静态再生（ISR）
增量静态再生（ISR）是Next.js对缓存模式称为“过时但可重用”（SWR）的专有实现。这允许重新生成已修改的单个静态呈现页面，而不是从头开始重新构建整个站点。使用SWR，您可以发布对特定页面的更改，例如通过CMS的webhook触发，而无需触发完整的站点重建，从而实现更快的站点更新。
SWR允许非常快速地更新静态内容，同时保留SSG的优点。当您使用SWR呈现特定页面时，该页面的一个版本将在初始构建期间进行静态生成和缓存。当该页面被更新时，不会立即触发该页面的重建，而是在下一次有人请求该页面时进行。该页面的以前（过时）版本将被提供，直到在后台重新验证和重新生成该页面，下一个请求该页面的请求将接收更新的版本。
请记住，使用 SWR/ISR 时，一些访问您网站的访客可能会看到过时的内容，因为更新的页面会在服务器上重建并缓存。您不会希望在显示准确且最新的数据（例如定价数据）的页面上使用 SWR。此外，如果您正在使用 SWR/ISR 生成新页面，则需要生成回退页面，以确保您的网站不会显示错误或提供 404。
分布式持久渲染（DPR）
分布式持久渲染（DPR）是 Netlify 提供的一种方便的渲染方法，可用于非常大的网站，以极大地缩短构建时间。您可以选择仅静态预生成最受欢迎和/或关键的页面，并使用 DPR 增强您的渲染策略，而不是预先构建整个站点。
DPR 允许您在第一次请求时按需静态生成和缓存页面。使用 DPR 请求页面的第一次请求将产生类似 SSR 的体验，之后生成的页面将从缓存中提供。
Netlify 支持 DPR 和 SWR，通过使用按需构建器（On-demand Builders）——用于按需生成 Web 内容的无服务器函数，该函数会自动缓存在 Netlify 的 Edge CDN 上。
边缘渲染（ESR）
这里是真正令人兴奋的地方。还记得我们谈论的 CDN 模型吗，其中静态页面和资产从最接近用户的地理服务器位置传递给用户吗？边缘渲染（ESR）利用 CDN 的力量，尽可能地向用户提供 SSR，提供传统 SSR 带来的个性化和动态数据的优点，并为全球所有人提供更快的速度。ESR 可以为整个站点、单个页面甚至仅页面的某些部分实现。
Netlify 提供的 ESR 通过 Netlify Edge Functions（在边缘执行的无服务器函数）提供，这些函数可以拦截 HTTP 请求并在发送到浏览器之前修改 HTTP 响应。这意味着您可以在请求时使用 ESR 增强静态站点和页面。当您尽可能使用 SSG 预构建并在需要时使用 Edge Functions 修改页面时，您保留了静态渲染的速度，并具备在需要时对页面进行动态更新的功能。ESR 是个性化、本地化、国际化等的绝佳选择，为您的网站访问者在全球范围内提供了一种超级 SSR。
