nuxt.js - Nuxt 选择哪种渲染模式？ SPA、SSR、SSG？

Question

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

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

在 JAMstack 文章中解释了我的一个类似用例(电子商务与 strapi、nuxt、snipcart)。我读到我必须在 SSG 中构建我的前端。在另一篇使用Nuxt 2的文章中，创建项目的截图显示选择了Universal模式。

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

Answer 1

一些要点

• 通用 应用基本上是在后端和前端 上进行一次渲染。在 Nuxt 的情况下，它将在服务器上呈现内容，然后在客户端上混合整个静态内容并将其作为 SPA。

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

• SSG 如果您有一些不经常移动的内容(例如博客或登录页面)，则它是完美的选择。它也是免费托管的，它很棒，因为您可以在水合阶段之前将初始内容作为文本获取。缺点是您构建所有静态页面的时间可能会增加。

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

---

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

有一张很好的图片提供了关于这个主题的更多细节，以及一些实际的 Web Core Vitals(TTI、FCP、TTFB 等)...

您也可以在此处检查渲染模式: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