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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

尽管我们最终因为这个原因和其他原因离开了 Next.js，使我们决定 Next.js 不是我们用例的最佳选择，但我们在坚持下去的同时，按如下方式缓解了这个问题，我希望它是有意义的任何人。另外，现在也许 Next.js 提供了一种更好的方法来做到这一点，所以我会在使用我的方法之前阅读 Next.js 文档。最后说明：自从我换到另一家公司后，我无法再访问代码了，所以也许有些点不会是 100% 的。

有这样的说法：

1. 我们创建了一个模块，负责请求配置文件并将结果保存在变量中。在导入该模块时，我们确保该变量尚未存在于 window 中。__NEXT_DATA__。如果是，我们恢复它，如果不是，我们向远程服务器请求它（这对 clint 端渲染很有帮助）。
2. 我们创建了一个server.js文件，如Next.js 文档所述。在此文件中，我们调用以获取配置文件并将其存储在内存中。
3. 在传递给的函数主体中，createServer我们将配置文件添加到req对象中，以便函数服务器端的应用程序可以访问它getInitialProps。
4. 我们确保使用配置文件的 getInitialProps 返回它，以便它将作为 props 传递给组件，并由 Next.js 序列化并在全局__NEXT_DATA__Javascript 变量中提供给客户端。
5. 鉴于配置最终位于__NEXT_DATA__服务器的变量中，使用步骤 1 中描述的技巧可以使应用程序不再请求该配置。