Nuxt 选择哪种渲染模式？SPA、SSR、SSG？

Question

我对网络开发还是新手，并尝试使用 Nuxt 和 Strapi 作为 CMS 来构建电子商务应用程序，以使网站所有者（在本例中也是我）能够轻松添加/编辑/删除产品。

我发现了很多关于这个主题的文章，但我感到非常困惑。我了解了JAMstack这个术语，我真的很喜欢它，但我认为我还没有完全理解它。

在 JAMstack 文章中解释了我的一个类似用例（使用 Strapi、nuxt、snipcart 进行电子商务）。我读到我必须在 SSG 中构建我的前端。在另一篇使用Nuxt 2的文章中，创建项目的屏幕截图显示选择了通用模式。

我的头快要融化了，真的不知道哪个选项是有效的，也不知道所有 SPA/SSG/SSR 是否都可以使用无头 cms 来实现，并提供一个 jamstack 应用程序，我应该使用哪一个。我应该首先使用 jamstack 吗？

Answer 1

一些要点

• 一个应用程序基本上是后端和前端的universal一次渲染。就 Nuxt 而言，它将在服务器上渲染内容，然后在客户端上合并整个静态内容并将其制作为 SPA。

• SPA是最常见的思考事物的方式，一开始速度很慢，因为您需要在继续之前将整个内容加载到浏览器中，但它是免费托管的。缺点主要是SEO。将其用于超级互动的地方或隐藏在登录后面的东西，例如管理仪表板。

• SSG如果您有一些不经常移动的内容（例如博客或登陆页面），那么这是完美的选择。它也是免费托管的，这很棒，因为您可以在水合阶段之前以文本形式获取初始内容。缺点是您可能需要花费更多时间来构建所有静态页面。

• SSR有点类似于过去的 PHP，它会在服务器上渲染页面并将其发送给您（而不是像 SSG 那样在构建时发送）。这也意味着您需要运行付费的 Node.js 服务器。它不是免费的，并且具有“访问者收费”的所有缺点：1 万人访问静态文件与访问正在运行的服务器是日夜不停的。同时，它非常适合超级动态内容，例如 Reddit 或 Twitter，甚至 Stackoverflow。

您可以查看这篇文章，它非常方便：https ://web.dev/rendering-on-the-web/

有一张很好的图片提供了有关此主题的更多详细信息，以及一些实际的 Web 核心生命体（TTI、FCP、TTFB 等）...

Rendering Patterns您也可以在这里查看：https: //www.patterns.dev/posts/

关于更简单实用的解释点，你也可以看看那些文章，写得很好。这是关于 Next 的，但大多数概念也与 Nuxt 相关：

• https://theodorusclarence.com/blog/nextjs-fetch-method
• https://theodorusclarence.com/blog/nextjs-fetch-usecase

或者网络上的任何其他文章。

如何选择？

问你自己：

• 我的内容类型是什么？安全的仪表板、博客、Twitter？
• 我可以支付服务器费用+管理负载+缓存部分，还是静态对我来说完全没问题？
• 那里会显示什么内容？加载时间重要还是人们可以稍等一下？
• 我将有多少页面，它们是否有很多关于 SEO 的变体/需求（例如 i18n）？

很酷的事情

Nuxt很快将同时支持所有这些：https://github.com/nuxt/framework/discussions/560