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

hxzsmxv2 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(347)

我最近从页面路由器转换到应用路由器，因为它的高级功能。然而，我遇到了一个困境，发现自己对SSR和数据获取的实现感到困惑。

问题：

文档建议，我们可以使用带有额外参数（如“{cache：'no-store'}”）的旧fetch函数来获取数据，而不是使用getServerSideProps（）或类似方法。然而，我不确定如何创建一个通用的帮助函数来获取可以在所有页面上使用的GraphQL数据。

困惑：

Next.js建议不要在组件中使用hook，因为组件默认是SSR。要使用hook，建议在组件中包含“use client”。但是，如果我们的目标是以SSR获取数据，然后将其存储在hook中，那么由于在组件中使用“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>

字符串

next.js

来源：https://stackoverflow.com/questions/77386421/how-to-do-proper-ssr-and-data-fetching-in-next-js-14-app-router

1条答案

按热度按时间

eqqqjvef1#

在“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>
}

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

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

问题：

困惑：

1条答案

相关问题

热门标签

最新问答