如何在 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中的任何内容都将在每个服务器请求上运行。 获得配置后，您可以将其作为道具传递给pages的组件。 从那里，我认为你有两个选择：

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.open 中。 __NEXT_DATA__ 。 如果是，我们恢复它，如果不是，我们将它请求到远程服务器（这将有助于 clint 端渲染）。
2. 我们创建了一个server.js文件，如 Next.js docs 所述。 在这个文件中，我们调用获取配置文件并将其存储在内存中。
3. 在传递给createServer的函数体中，我们将配置文件添加到req对象中，以使其可访问getInitialProps函数服务器端的应用程序。
4. 我们确保使用配置文件的 getInitialProps 返回它，以便它将作为道具传递给组件，并由 Next.js 序列化，并在__NEXT_DATA__全局 Javascript 变量中提供给客户端。
5. 鉴于配置最终出现在服务器的__NEXT_DATA__变量中，使用步骤 1 中描述的技巧使应用程序不会第二次请求配置。