Next JS：有没有办法只在服务器端调用某些东西，只在新页面加载时调用？

Question

我们的团队最初创建了一个 _app.tsx 和 getInitialProps，并包含了一些类似的内容

if (!req) return {};

作为顶行。这个想法是让getInitialProps 仅在服务器端运行，仅在初始页面加载时运行。我们认为这是一个安全的假设，因为通常的建议（经常在 stackoverflow 答案中重复）是 getInitialProps 在页面转换时运行客户端。

我们后来发现getInitialProps 实际上在页面转换时运行服务器端，如果您要转换到具有getServerSideProps 的页面。

所以这不符合我们的目的 - 我们有几个在 getInitialProps 中进行的网络查询，这些查询是在我们的大多数页面转换中进行的（因为我们的大多数页面都有 getServerSideProps），而我们的意图是仅在新页面（应用程序）加载时运行这些查询。

我们可以改为仅在组件挂载时使用 useEffect，但我们希望在服务器端而不是客户端运行这些查询，以防止出现视觉闪烁。

我正在学习如何设置一个包含 setState 的上下文，但初步测试表明它的初始 setState 在客户端和服务器端都运行：

...

const getString = (): string => {
  console.log('about to set string!');
  return 'string';
};

const PagePropsProvider: React.FC<IProps> = ({ pageProps, children }) => {
  const [sample, setSample] = useState<string>(getString());

  return <PagePropsContext.Provider value={pageProps}>{children}</PagePropsContext.Provider>;
};
...

对于像 auth 上下文这样的东西，我想要的是 _app.tsx 的 getInitialProps 在页面加载时请求初始用户对象服务器端，从道具将其提供给上下文，而不是应用程序在每次页面转换时不必要地重新请求初始用户对象。如果我可以阻止getInitialProps 在页面转换上运行，我可以做到这一点。有没有办法阻止getInitialProps 在这些页面转换上运行？还是一种更惯用的方式来完成我们的目标？ （理想情况下，我们宁愿完全避免使用getInitialProps，但getServerSideProps 仍然存在同样的问题，如何使其仅在新页面加载时调用。）

Answer 1

getInitialProps 仅在第一次加载时被称为服务器端。在页面转换期间，getInitialProps 仅在浏览器端调用，而 getServerSideProps 在第一次加载时和所有转换期间将被称为服务器端。

如果您只想在首次加载期间从服务器端获取数据，则应仅使用getInitialProps，如下所示：

MyPage.getInitialProps = async () => {
  if (typeof window !== 'undefined') {
    return {} // browser-side, fetch data directly in component
  }

  console.log('server-side !');
  const data = {} // fetch your data
  return { data }
};

然后您可以使用收到的道具设置您的上下文状态。

const PagePropsProvider: React.FC<IProps> = ({ pageProps, children }) => {
  const [state, setState] = useState()
  useEffect(() => {
    if (pageProps.data) {
      setState(pageProps.data)
    }
  }, [pageProps.data])
  return <PagePropsContext.Provider value={state}>{children}</PagePropsContext.Provider>;
};

Answer 2

通过仔细检查getInitialProps 和getServerSideProps 中的context 对象，我注意到一个元素似乎可靠地表明了客户端页面转换和新页面加载之间的区别：context.req.url对于客户端页面转换，似乎总是以 /_next/data 开头 - 即使代码本身（getInitialProps 或 getServerSideProps）正在服务器端运行。

所以我们正在尝试如下代码：

if (!req || (req.url && req.url.startsWith('/_next/data'))) {
  // return early
}
...

我不确定这对于未来的版本是否可靠或“受支持”，所以我也在此处打开了一个功能请求：

https://github.com/vercel/next.js/discussions/19459