如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联

Posted 2023-02-23

【中文标题】如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联

【英文标题】：How to manage bunch of routes from API and their component association with Nuxt router module

【发布时间】：2020-10-06 08:13:28

【问题描述】：

您好，亲爱的 Nuxt/Vue/Node 社区，

我在我的 Nuxt.js 应用程序上遇到了一些加载时间和内存泄漏问题，这似乎来自路由部分。

一些上下文：

我正在建立一个明显需要 SEO 的电子商务网站。 我使用 Laravel 作为后端，通过 RESTful API 提供 Nuxt.js s-s-r。

我的 API 端点之一“/urls”提供了页面/产品/菜单/等的所有 url。在应用程序和 Nuxt.js 部分，我将这些 url 与其在 router.js 中的相关组件相关联（我使用的是“nuxt-community/router-module”）。

Nuxt.js 部分不是静态模式，而是在生产中作为实时 s-s-r 应用程序（nuxt 构建/启动）工作。

问题：

事实上，我的第一个页面的加载时间非常慢（10 秒+），因为它从 API 加载所有 url 并将它们与它们的相关组件相关联（基于每个 url 模式），而且它对服务器来说非常沉重因为它是为应用程序的每个用户加载的第一页加载...

您能解释一下处理远程 url 和 Nuxt.js 组件的最佳方法吗？也许有一些方法可以使用全局路由中间件来捕获请求并将 url 与正确的组件关联起来，或者可能有更好的方法来做到这一点......

附属问题：Nuxt.js 使用路由器处理 20.000+ url 是否有问题？

提前感谢您的帮助！

【参考方案1】：

你不需要服务器端渲染，因为你有一个 Laravel API。我建议您改用 Vue.js，当您申请 lazy loading 时，您的问题的解决方案非常简单。

【讨论】：

您好 Billal，感谢您的评论。我想我在我的上下文中遗漏了一些东西......我正在构建一个电子商务应用程序，所以对 SEO 的需求非常重要，这就是为什么我使用 s-s-r 模式而不是 SPA 模式，以及为什么我m 在 Vue.js 上使用 Nuxt.js。