如何在 Next.js 14 App Router 中进行正确的 SSR 和数据获取？

Question

由于其高级功能，我最近从页面路由器过渡到应用程序路由器。然而，我遇到了一个困境，对SSR的实现和数据获取感到困惑。

问题：

文档建议，我们可以使用旧的 fetch 函数以及诸如“{cache: 'no-store'}”之类的附加参数来简单地获取数据，而不是使用 getServerSideProps() 或类似的方法。但是，我不确定如何创建一个通用辅助函数来获取可在所有页面上使用的 GraphQL 数据。

混乱：

Next.js 建议不要在组件内使用钩子，因为组件默认是 SSR。要利用挂钩，建议在组件中包含“使用客户端”。但是，如果我们的目标是以 SSR 的方式获取数据，然后将其存储在钩子中，那么由于在组件内使用了“use client”，获取的数据是否仍然保持其 SSR 特性？

如果您编写一个函数来以 SSR 的形式获取数据以及存储数据的钩子，那就更好了。非常感谢您的帮助。先感谢您。

这是我在上一页路由器的应用程序中使用的辅助函数。

<pre>
export async function storefront(params) {
    const response = await  fetch(process.env.NEXT_PUBLIC_API_URL, { 
       method: "POST",
       headers: {
       "Content-Type": "application/json",
       "Another-Property": "Something here", },
       body: JSON.stringify({ params }),
     });
    return response.json();
   }
</pre>

Answer 1

在“use client”指令中调用的任何数据获取都将在客户端获取。所有初始 UI 仍将在服务器上渲染，然后在客户端上进行水化。因此，如果您在钩子内调用数据获取，这将要求您位于客户端组件中，UI仍将尽可能在服务器端呈现，但不会有数据，因为一旦完成所有操作，数据就会被获取击中客户，然后再水化。

“但是，如果我们的目标是以 SSR 的形式获取数据，然后将其存储在钩子中”

我认为这是不可能的，因为您无法将类似的内容传递给客户端，但是您可以在服务器上获取数据，然后将其传递给客户端。“使用客户端”指令并不意味着客户端渲染，它仍然是服务器端渲染。

下面的代码示例完全是服务器端渲染的。

export async function Page() {
  const myDataQ = await fetch (....)
  const data = await myDataQ.json()
  return <ClientComp data={data}/>
}

#/ClientComp.tsx
"use client"
export const ClientComp = ({data}) => { 
  return <div> {data} </div>
}