NextJS 中不同形式的预渲染

Next Js是一个基于 React 的全栈框架，支持网页预渲染等功能。与将整个应用程序加载到客户端的传统 React 应用程序不同，Next Js 允许将网页呈现在服务器上，这对性能和 SEO 来说非常有用。您可以在此处了解有关 Next Js 的更多信息。

在我们进入不同类型的预渲染之前，让我们首先定义预渲染。

预渲染： Next Js默认预渲染所有页面，这意味着Next Js会提前为每个页面生成HTML，而不是依赖客户端javascript来做这一切。因此，用户将在第一次加载时看到完整的 HTML 内容（但在加载 javascript 之前没有交互性），而不是看到空白屏幕并等待加载 javascript。服务器负责生成网页上的所有内容。预渲染内容可以提高性能和 SEO，因为 SEO 爬虫现在可以快速读取实际内容并相应地对您的网页进行排名。

预渲染：

没有预渲染：

Next Js中不同的预渲染形式： Next Js提供了三种不同的预渲染技术：

1.静态站点生成（SSG）：它是在构建时生成HTML的方法。然后在每个请求上使用预呈现的 HTML。如果我们有一个不需要任何外部数据的 HTML 页面，Next Js 会默认预渲染它的内容。 （例如：关于页面）。但是，如果我们的网页需要来自某些外部 API 的数据，那么 Next Js 作为静态生成过程的一部分将提前获取和下载数据并生成 HTML。所有这些都是在构建期间完成的。然后将所有预生成的内容存储在 CDN 中，以便每当用户请求查看网页时，都会发送缓存版本，从而提高性能。

此方法适用于内容静态的页面，例如关于页面、联系页面等。

2. 增量站点再生：在静态站点生成中，没有动态内容的空间。在这种方法中，HTML 会定期生成，允许您在构建站点后创建或更新静态页面。它结合了静态生成的力量和动态内容的灵活性。每当发出请求时，页面都会以特定间隔（例如 60 秒）的初始化静态生成。在该间隔之后，将重新下载或重新生成页面。所以第一个用户可能会看到陈旧的数据，但从那时起，每个用户都会看到新的数据。

此表单适用于具有动态内容但不会像任何电子商务网站的产品页面那样频繁更改的页面，因为产品的价格可能会发生变化。

3. Server-Side Rendering：它是预渲染方法，为每个请求生成一个HTML页面，由于没有缓存内容，因此比其他两种方法慢。但是，它适用于频繁更改的动态内容。

此方法适用于动态消息等页面。

您现在可以根据用例决定哪种形式适合您的网页。一个好的做法是始终检查我们是否可以静态生成任何数据，因为它要快得多。预渲染的主要优点是SEO爬虫可以快速发现页面内容并对其进行排名。它还提高了性能，因为页面将渲染得更快，因为内容已经被渲染。