在 Next.js 13 及更高版本中获取服务器端数据
在 Next.js 的最新版本中，“getStaticProps”和“getServerSideProps”方法被逐步被淘汰，让开发人员想知道如何在现代 Next.js 应用程序中获取服务器端数据。
服务器组件简介
在 Next.js 13 及更高版本中，服务器组件的引入提供了一种在服务器端获取数据的新方法。与传统的页面组件不同，服务器组件可以直接访问组件体内的数据获取逻辑。
服务器组件中的示例
以下代码片段说明了如何获取数据服务器组件中的服务器端：
export default async function Component() {
// Fetch server-side data with caching options
const staticData = await fetch(`https://...`, { cache: "force-cache" });
const dynamicData = await fetch(`https://...`, { cache: "no-store" });
const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
return "...";
}路由段配置
除了服务器组件之外，Next.js 还提供了路由段配置。这允许开发者控制特定路由或页面的缓存行为，甚至在服务器端数据获取期间也是如此。
路由段配置中的示例
此示例展示了如何配置使用路由段配置进行特定于路由的缓存：
// layout.js OR page.js OR route.js ??
export const revalidate = 10; // Revalidate every 10s
// ...
export default async function Page() {
const posts = await getPosts();
// ...
}以上是如何在 Next.js 13 及更高版本中获取服务器端数据？的详细内容。更多信息请关注PHP中文网其他相关文章！
