在Next.js中掌握ISR：如何增強SEO和用戶體驗

發佈於2025-03-23

什么是ISR？

ISR如何改善SEO和用户体验？

如果您使用了react.js或传统的单页应用程序（SPA），则您知道水疗中心通常只有一个HTML文件。当用户首次访问水疗网站时，水疗中心会发送最小的HTML文件（在React中，这通常是index.html）。之后，它获取了请求页面所需的CSS，JavaScript和其他资源。然后将这些资源渲染并合并到HTML到达客户端（浏览器）后。但是，如前所述，Spa发送的初始HTML文件几乎没有内容。

现在，想象一个Google机器人，请求网站而不是用户。尽管现代的Google Bot可以执行JavaScript来检索内容，但仅依靠此内容仍会对SEO产生负面影响。该机器人可能会将初始HTML视为空的，这可能会延迟索引页面内容，并可能损害您的搜索排名。

Next.js通过使用服务器端渲染技术（例如服务器预渲染）来解决此问题。我们将在稍后详细介绍渲染，但这是一个简短的概述。使用服务器预渲染，每个路由的HTML将在服务器上生成并直接发送给客户端。 CSS和JavaScript文件通常被捆绑并缓存。

因此，当用户或Google bot访问网站时，他们立即看到一个完全渲染的页面。这可以改善SEO，因为Google Bot可以立即看到HTML中的内容。它还通过加速页面加载来增强用户体验，这意味着用户不必等待内容动态加载。

ISR如何工作？

如果您想更好地了解ISR（增量静态再生）的工作方式，请让我以示例来解释。想象一下，您是管理网站上博客列表的管理员。每次发布新博客时，您都不想重建项目。相反，您希望每60秒自动更新您的博客列表页面。因此，当您撰写新博客时，您希望它出现在不手动重建项目的情况下。这是ISR进来的地方。虽然您可以使用SSR（服务器端渲染）之类的方法，但如果您希望网站以特定的间隔更新，但ISR是必经之路。我们稍后将讨论SSR。

现在，假设您在博客列表页面上实现ISR，并将重新验证时间设置为60秒。您是第一次构建项目，然后重新验证计时器开始。用户访问您的网站，转到博客列表页面，并查看当前的博客列表。同时，您发布了一篇新的博客文章，但是由于60秒的窗口中还有20秒，因此访问该网站的新用户还没有看到新博客。

60秒开始，ISR检查了新数据，看到有一个新的博客文章，并使用更新的内容重新生成静态页面。然后，它在服务器上缓存新版本。要注意的是：虽然ISR正在再生页面，但用户仍会看到旧版本，直到新版本准备就绪。因此，在ISR完成后，任何新访问者都会看到更新的页面，但是在重新验证之前已经在网站上的用户除非旧页面刷新旧页面。

要记住的另一个关键是，当您使用NPM Run Build构建网站时，初始静态页面将由SSG（静态站点生成）而不是ISR生成。第一个构建后，ISR开始处理再生过程。另外，ISR不会再生您的整个网站；它仅重新生成特定页面ISR实现的位置。因此，当ISR再生时，只有该特定页面已更新，而不是整个项目。

如何在应用程序路由器中实现ISR

要在应用程序路由器中实现ISR（增量静态再生），重要的是要知道必须在服务器组件而不是客户端组件中使用ISR。这是因为ISR是一种服务器渲染方法，而不是客户端的方法。因此，您应该将ISR放在诸如app/blog/page.tsx或app/blog/page.jsx的文件中。

要记住的一个关键点是，如果您不在设置重新验证选项的服务器组件中调用API，则ISR将无法正常工作。服务器组件必须能够获取新数据才能再生页面，否则不会发生更新。

为了启用ISR，您需要做的就是将重新验证属性添加到获取方法中。如果您喜欢使用Axios而不是获取，则仍然可以通过类似地配置请求来使用它，但是现在，我坚持使用fetch。也许以后我会解释如何使用Axios进行。

我提供了TSX文件和JSX FIEL的示例：

这是在tsx文件

中实现的示例 [2

这是在JSX文件中实现的示例：

[2

如何在页面路由器中实现ISR？

要在页面路由器中实现ISR，您必须从组件中导出getstatic props，并将重新验证属性添加到此函数中。此功能仅在服务器端渲染期间运行，因此您需要确保在GetStaticProps中调用API。如前一节所述，您可以使用fetch或axios获取数据，但请记住必须在GetStaticProps中进行API调用，否则ISR将行不通。

再次，此功能是在服务器上执行的，而不是客户端。这是一个示例要证明：

这是在tsx文件中实现的示例：

这是在JSX文件中实现的示例：

结论

Mastering ISR in Next.js: How to Boost SEO and User Experience 您需要对ISR是什么，其工作方式以及如何在页面路由器和应用程序路由器中实现它有很好的了解。在本文中，我试图尽可能清楚地解释它，如果我可以更好地解释它，稍后会更新它。如果有什么尚不清楚的话，请通过发表评论让我知道，我将提供进一步的澄清。