不同的水合与渲染策略

Dont worry, this article is not about the controversial Hydration breaks they are having during the World Cup matches.

别担心，本文不是关于他们在世界杯比赛中备受争议的 Hydration 休息时间。

We want to discuss the hydration process in Server-Side Rendered applications, how other frameworks handle it, and similar rendering strategies that we apply to make our apps faster.

我们想讨论服务器端渲染应用中的注水过程、其他框架如何处理它，以及我们为使应用更快而采用的类似渲染策略。

First, open a server-rendered page on a slow phone.

首先，在一台性能较慢的手机上打开一个服务端渲染的页面。

The content paints almost instantly and looks finished. But tapping a button does nothing for 1 or 2 seconds.

内容几乎瞬间渲染完成，看起来已经加载完毕。但点击按钮后 1 到 2 秒内没有任何反应。

During that time, the page quietly downloads and runs JavaScript to rebuild everything you’re already looking at.

在此期间，页面会在后台静默下载并运行 JavaScript，以重建你正在查看的所有内容。

That gap between a page that “looks ready” (HTML is shown) and one that “actually works” (interactive via JavaScript) is called hydration.

一个“看起来准备好了”（HTML 已显示）的页面和一个“真正起作用”（通过 JavaScript 可交互）的页面之间的这种差距，被称为水合。

Every recent rendering strategy aims to shrink that gap.

最近的每一种渲染策略都旨在缩小这一差距。

Static generation

静态生成

Before reducing hydration, let’s look at the alternatives.

在减少 Hydration 之前，让我们看看其他替代方案。

For many websites, the best approach is to render HTML once, ahead of time, rather than on every request.

对于许多网站来说，最好的方法是提前一次性渲染 HTML，而不是在每次请求时都渲染。

If the page is the same for everyone—a blog post, a docs page, a marketing landing page, you are regenerating identical HTML thousands of times.

如果页面对每个人来说都是一样的——比如博客文章、文档页面、营销落地页，你就是在重复生成数千次相同的 HTML。

Static Site Generation (SSG) renders each page once at build time, writes the result to an HTML file, and serves that file from a CDN.

Static Site Generation (SSG) 在构建时渲染每个页面一次，将结果写入 HTML 文件，并从 CDN 提供该文件。

The server does nothing per request except hand over a file.

对于每个请求，服务器除了交付一个文件外什么都不做。

// Next.js: this runs at BUILD time, not on each request.
export async function getStaticProps() {
  const posts = await loadPostsFromCMS();
  return { props: { posts } };
}

The obvious limit is freshness.

明显的限制在于内容的时效性。

If the H...