掌握 Nextjs：我通过反复试验从 SSG 到 SSR 的旅程

大家好！在这个博客中，我想与您分享我已经工作很长时间的下一个新项目。这真的让我回想起当我开始我的 MERN stack 之旅时，我曾经在我所做的每个项目中都很挣扎，但在经历了所有这些困难之后，我仍然可以说，陷入某些主题仍然让我有点害怕。

我想跟大家分享一下SSG和SSR的区别。
我正在做一个制作博客网站的小项目，我想在构建时生成博客，但它没有生成，经过 1 周的搜索和在互联网上徘徊了解差异后，我终于明白了差异是什么。

介绍

Next.js 是 vercel 开发的一个强大的 React 框架。它有几个内置功能来增强开发和用户体验。
一些功能是：

• 混合静态和服务器渲染：它支持 SSR 和 SSG，允许开发人员根据他们的用例选择最好的。
• API 路由：它允许您在 nextjs 应用程序本身中构建 API 端点，从而无需为简单的 API 任务提供单独的后端服务。
• 自动代码分割和优化：它分割代码，只发送必要的javasript到浏览器，并且有许多内置优化，如图像优化、更快的构建等。
• 文件系统路由：它有一个文件系统路由（无论您使用应用程序还是页面路由器）自动创建路由。
• TypeScript 支持：建议使用 TypeScript 进行编码，因为它只会在运行时捕获许多错误，如果不使用，可能会在构建时导致问题。

SSG VS SSR

服务器端生成 (SSG)

SSG 在构建时生成静态 HTML 页面。内容是预渲染的，这意味着在您重建网站之前它不会改变。
它最适合不经常更改的页面，例如营销页面或不经常更改的文档。
它基本上是在构建期间生成的并且是静态的，因此加载速度非常快。

要获取要在构建时渲染的动态路径，可以使用 getStaticParams。您可以在这里阅读更多相关内容。链接

服务器端渲染（SSR）

SSR 针对每个请求生成 HTML 页面。服务器为每个传入请求动态呈现 HTML。它最适合需要根据每个请求保持动态和最新的页面。这包括用户仪表板、新闻源和其他经常更改或特定于用户的内容。
由于 HTML 是根据每个请求生成的，因此它比 SSG 慢，但它确保内容始终是最新的。

最后的想法

我的 Next.js、SSG 和 SSR 之旅充满了学习机会。每一次的错误和挑战都加深了我的理解，提高了我解决问题的能力。我鼓励您在项目中尝试 SSG 和 SSR，看看它们如何最好地满足您的需求。

感谢您的阅读！我希望我的经验对您的 Next.js 之旅有所帮助。请随意分享您自己的经验或在下面的评论中提出问题。让我们作为一个社区继续学习和成长。快乐编码！