检索数据服务器端并使用 Next.js 保存在上下文中

Posted 2023-02-22

【中文标题】检索数据服务器端并使用 Next.js 保存在上下文中

【英文标题】：Retrieve data server side and save in context with Next.js

【发布时间】：2021-05-12 08:11:29

【问题描述】：

我希望能够从 API、服务器端检索数据，并将其加载到 React 上下文中，以使其可用于我的应用程序中的任何组件。我尝试了各种各样的事情，但似乎没有什么能让我完全按照自己的意愿去做。我尝试过的一些事情包括：

getServerSideProps - 这允许我在服务器端检索数据，但只存在于页面组件中，所以如果我希望在每个页面上都可以使用它，并且我不知道我的用户将登陆哪个页面，我'需要为此添加逻辑到每一页。

getInitialProps in _app.js - 我可以将它添加到 _app.js 组件中，该组件将在服务器端运行，并且可以通过上下文提供程序使其对所有组件可用，但问题是它在每个组件上运行页面，即使在客户端导航时也是如此。我希望能够调用 API 一次且仅一次，但这似乎不允许这样做。

getInitialProps in _document.js - 我可以将它添加到仅在服务器上运行的 _document.js 组件中，这似乎解决了每个页面都调用它的问题，但我不知道如何存储它从那里开始在 React 上下文中。事实上，我似乎无法弄清楚如何在任何地方访问这些数据。看起来 _document.js 中的 getInitialProps 在 _app.js 中被调用 after getInitialProps，所以我不确定当我在 _app 中时是否可以使用从 _document.js 中的 getInitialProps 生成的值。 js.

如果我在客户端调用 API，我可以通过多种方式完成这项工作，但这不适用于我的用例，因为当客户端使用来自API。

有没有人想出解决这个用例的方法？

【问题讨论】：

我很高兴回答这个问题。

【参考方案1】：

在 Next.js 中，没有原生函数来 a) 从 API 检索数据，b) 在服务器上执行，c) 使其在每个页面上都可用，并且 d) 仅在第一页上查询 API用户访问。

如您所见，getInitialProps 和 getServerSideProps 将在您每次访问该页面时运行。

不过，我们可以让它工作。

如果需要初始加载前的数据

在_app.js 中使用getInitialProps 从API 检索数据 将数据加载到 _app.js 文件内的 React 上下文中，使其在页面之间持续存在 浏览器获取数据后，创建cookie。 在后续页面加载时，在 getInitialProps 中检查是否有 cookie。如果是这样，请不要检索数据。

有一个相当流行的库nookies 可以帮助处理 Next.js 项目中的 cookie。

如果你可以加载页面然后获取数据

在_app.js 中使用getInitialProps 会产生性能成本：您将永远无法创建完全静态的页面。那是因为getInitialProps 必须在每一个页面加载时运行。

如果您可以在页面加载后获取数据，请添加API route。然后，在上下文提供程序中，使用useEffect 获取数据。

【讨论】：

谢谢尼克。听起来您正在确认我的信念，即“开箱即用”是不可能的。我也考虑过使用 cookie，但对我来说感觉有点 hacky。如果没有其他人提出更好的解决方案，我会奖励你。

【参考方案2】：

你可以试试getInitialPropsin the Page Component itself

这样，数据提取只会发生在那个确切的页面上。

【讨论】：

感谢 Edrian 的建议，但我在每一页上都需要这些数据，所以这意味着在每一页上添加 getInitialProps 的代码，这是我试图避免的事情。这就是为什么我希望用_app.js 或_document.js 做点什么。另外，我想在我的大部分页面上使用getServerSideProps。

【参考方案3】：

也许 Redux 可以解决您的问题。上下文 api 往往会触发消费者不必要的重新渲染。