在 Next.js 中掌握 SSG：如何提升 SEO 和用户体验

SSG（静态站点生成）是 Next.js 中的一种方法，类似于 ISR（增量静态重新生成），但它仅在构建时运行。网站构建完成后，SSG 不会再次呈现页面，直到下一次构建为止。在本文中，我将深入探讨 SSG 在 Next.js 中的工作原理、它如何改进 SEO 以及它如何增强用户体验。

什么是SSG？

SSG 是 Next.js 中的一个方法，在构建过程中在服务器上运行。它生成静态页面及其 CSS、JavaScript 和相关资源，将所有内容捆绑在一起以获得完整的静态体验。

SSG 如何运作？

要在项目中使用SSG，您需要在要使用SSG的页面中导出getStaticProps方法。如果您使用应用程序路由器，则在构建项目时 SSG 默认运行。但是，如果您使用页面路由器，则必须手动添加 getStaticProps。

此方法创建捆绑的静态页面，因此当用户或爬虫请求实现了 SSG 的页面时，Next.js 会发送一个完全准备好的页面及其所有资源。这消除了加载额外资源的需要，最大限度地减少了延迟，这对于 SEO 和用户体验非常有用。

对于动态路由，例如使用 slug 或 ID 的博客详细信息页面，您需要另一种方法来获取该页面的数据。这个方法是 getStaticPaths，在构建时它在 getStaticProps 之前运行。

如何在 App Router 中实施 SSG

当您构建项目时，SSG 默认在 Next.js App Router 中实现。您的所有页面都将被捆绑并缓存在 CDN 中，因此无需为静态路由添加额外的步骤。

但是，对于动态路由，例如使用 slugs 或 ID 的动态路由，Next.js 无法在构建时自动获取它们。您需要从 API 或项目中的其他来源获取这些列表。这就是generateStaticParams函数的用武之地。它允许您获取动态路由的slugs或ID列表并返回它们，因此Next.js可以为每个路由生成静态页面。需要记住的重要一点是，generateStaticParams 必须在服务器组件中使用，而不是在客户端组件中。

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

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

如何在寻呼路由器中实现 SSG

要在页面路由器中实现 SSG，您需要创建 getStaticProps 函数并将其从要实现 SSG 的页面中导出。构建项目时会自动调用该函数。

如果您有动态路线，则需要创建另一个函数并将其导出。正如我之前提到的，此函数在 getStaticProps 之前调用，您必须从 API 获取数据或从文件获取 ID 或 slugs 列表。

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

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

结论

SSG 是一种捆绑和创建静态页面的有用方法。如果您想改善网站的 SEO 和用户体验，建议使用 SSG、ISR 或 SSR。

在这个博客中，我写了关于 SSG 的文章。我还可以在以下地址找到另一篇关于 ISR 的文章：Mastering ISR in Next.js。稍后我会再写一篇关于SSR的文章。如果您有任何疑问，请随时发表评论；我是来帮忙的。此博客稍后可能会更新，因为我想与您分享最好的知识。

感谢您的阅读！如果你想阅读更多文章，可以关注我的网站：Saeed Niyabati。我希望你喜欢它。暂时再见！

以上是在 Next.js 中掌握 SSG：如何提升 SEO 和用户体验的详细内容。更多信息请关注PHP中文网其他相关文章！