Javascript 如何在Next.js应用程序中只获取一次数据,并使所有应用程序(包括服务器和客户端)都可以访问该数据

Javascript 如何在Next.js应用程序中只获取一次数据,并使所有应用程序(包括服务器和客户端)都可以访问该数据,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我正在开发一个Next.js应用程序,它需要在初始化之前从远程服务器获取一个配置文件。我想在呈现应用服务器端之前,每次调用服务器只请求一次配置文件。之后,我希望能够在客户端获得相同的配置,而不必从浏览器向远程服务器发出第二个请求 我试图通过在\u app或\u document文件中使用getInitialProps函数来实现这一点,然后使用React的上下文API使配置对每个组件都可见,但除非我错了,否则这将在服务器中运行请求配置的代码(在浏览器的第一次调用中)和客户端(在每个页面导航中) 我

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

我试图通过在
\u app
\u document
文件中使用
getInitialProps
函数来实现这一点,然后使用React的上下文API使配置对每个组件都可见,但除非我错了,否则这将在服务器中运行请求配置的代码(在浏览器的第一次调用中)和客户端(在每个页面导航中)

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


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

您是正确的,在
\u app.js
\u document.js
中的
中的任何内容都将在每个服务器请求上运行。一旦您获得配置,您可以将其传递给我的组件n
pages
作为道具。从那里,我想你有两个选择:

  • 现在应用程序已启动,请将应用程序的其余部分作为SPA客户端运行。这将防止将来发生任何SSR。显然,您将失去SSR的好处,初始页面加载可能会更长,但之后会很快
  • \u app.js
    中获取配置后,将其作为cookie发送(假设它不是太大以至于不能成为cookie?)。在将来向服务器发出请求时,cookie将自动发送,您将首先检查cookie-如果它不存在,请获取配置。如果它确实存在,请跳过更昂贵的引导,因为应用程序是引导的
  • 因此,我认为这实际上取决于您是否希望在服务器上引导一个单页应用程序,但之后完全是客户端(选项1)或服务器端每页呈现,同时最小化昂贵的引导(选项2)


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

    尽管我们最终离开了Next.js,原因是Next.js不是我们用例的最佳选择,但我们在坚持使用它的同时,缓解了以下问题,我希望这对任何人都有意义。而且,到目前为止,Next.js可能提供了更好的方法,所以在使用我的方法之前,我会阅读Next.js文档。最后一点注意:我再也不能访问代码了,因为我换了一家不同的公司,所以可能有一些点不是100%的

    有这样的说法:

  • 我们创建了一个模块,负责请求配置文件并将结果保存在变量中。在导入此模块时,我们确保该变量尚未出现在窗口中。
    \uuuu NEXT\u DATA\uuuu
    。如果是,我们将其恢复,如果不是,我们将其请求到远程服务器(这将有助于客户端渲染)
  • 我们创建了一个名为的
    server.js
    文件。在该文件中,我们调用以获取配置文件并将其存储在内存中
  • 在传递给
    createServer
    的函数体中,我们将配置文件添加到
    req
    对象中,使其可访问
    getInitialProps
    函数服务器端的应用程序
  • 我们确保使用配置文件的getInitialProps返回它,以便它将作为props传递给组件,并由Next.js序列化,并在
    \uuuuuuuunext\u DATA\uuuu
    全局Javascript变量中提供给客户端
  • 假设配置最后出现在服务器中的
    \uuuu NEXT\u DATA\uuu
    变量中,使用步骤1中描述的技巧使应用程序不会再次请求配置

  • 谢谢你的回答。我的案例是第一个,一个服务器端呈现的应用程序,在第一次加载后就变成了SPA。在进一步调查之后,我发现_文档在服务器端只呈现一次,而_应用程序在服务器端呈现一次,再加上每次客户端都有导航。这让我认为这是进行初始设置的最佳位置应用程序数据收集实际上是一个文档,这是你的建议吗?如果是,那么如何将应用程序初始化过程中接收到的所有数据作为道具传递给应用程序的其余部分?那么你甚至可能不需要SSR和next。你可以使用create React应用程序来实现这一点,并使用类似于#1的配置cookie(使用express)为其提供服务服务器托管。对服务器的任何请求——对您的用户来说,这只是最初的请求——都可以通过节点运行配置并将其与您的应用程序一起发送。之后,SPA将完全接管。实际上,我确实需要SSR,这是我们的一项要求,因此我们至少需要能够在服务器端提供第一次点击,并且at是我们决定下一步使用的原因。说到这里,在第一次点击之后,正如您所说,React应用程序在客户端接管,并且该应用程序成为一个普通的SPA,这对我们来说也很好。到目前为止,我们正在尝试在服务器端获取配置,并以某种方式使其成为React数据的一部分