在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中文網其他相關文章！
