javascript - 如何在 Next.js 应用程序中仅获取一次数据并使其可供所有应用程序(服务器和客户端)访问

Question

我正在开发一个 Next.js 应用程序，该应用程序需要在初始化之前从远程服务器获取配置文件。我想在渲染应用程序服务器端之前每次调用服务器时仅请求一次配置文件。之后，我希望能够在客户端中获得相同的配置，而不必从浏览器向远程服务器发出第二次请求。

我尝试通过在 _app 或 _document 文件中使用 getInitialProps 函数来实现此目的，然后使用 React 的 Context API 来实现配置对每个组件都可见，但除非我错了，否则这将运行在服务器(在浏览器的第一次调用)和客户端(在每个页面导航)中请求配置的代码。

我还尝试创建一个 server.js 文件，从那里请求配置并将其存储在 ES6 模块内的变量中。但是，我无法使这种方法起作用，因为显然 Next.js React 应用程序无法访问与 server.js 相同的模块，因为它们实际上是两个不同的应用程序。再说一遍，我可能是错的。

基本上，我想知道 Next.js 是否提供任何类型的“引导位置”，我可以在其中执行应用程序初始化任务，生成可发送到 Next.js 将启动的 React 应用程序的数据。

Answer 1

您是正确的，_app.js 或 _document.js 中的 getInitialProps 中的任何内容都将在每个服务器请求上运行。获得配置后，您可以将其作为 props 传递给 pages 中的组件。从那里，我认为你有两个选择:

1. 现在应用程序已启动，将应用程序的其余部分作为 SPA 客户端运行。这将防止 future 发生任何 SSR。显然，您会失去 SSR 的优势，并且初始页面加载可能会更长，但之后会很快。
2. 在 _app.js 中获取配置后，将其作为 cookie 发送(假设它不是太大而无法成为 cookie？)。在将来向服务器发出请求时，将自动发送 cookie，您将首先检查 cookie - 如果它不存在，则获取配置。如果确实存在，请跳过更昂贵的引导，因为应用程序已引导。

因此，我认为这实际上取决于您是否想要在服务器上引导单页应用程序，然后完全在客户端(选项 1)或服务器端每页渲染，同时最大限度地减少昂贵的引导(选项 2)。

如果这对您的应用程序和引导有意义，那么没有什么可以阻止您从服务器发送多个 cookie。请记住不要将其设为仅 HTTP 的 cookie，因为您需要读取该 cookie 客户端 - 毕竟，这就是您正在寻找的 - 在服务器上生成的客户端配置。