"Next.js App Router 数据获取与 Server Actions 实战"

Next.js App Router 数据获取与 Server Actions 实战页面数据获取// app/page.tsx export const revalidate = 60; async function getData() { const res = await fetch('https://api.example.com/items', { next: { revalidate: 60 } }); return res.json(); } export default async function Page() { const data = await getData(); return <pre>{JSON.stringify(data, null, 2)}</pre>; } Server Actions 表单// app/actions.ts 'use server'; export async function submit(formData: FormData) { const name = String(formData.get('name') || ''); // 处理与写入逻辑 } // app/page.tsx import { submit } from './actions'; export default function Form() { return ( <form action={submit}> <input name="name" /> <button type="submit">提交</button> </form> ); } 缓存策略使用 `revalidate` 进行 ISR；对实时接口使用 `cache: 'no-store'`总结结合 App Router 的数据获取与 Server Actions，可实现端到端的渲染与交互逻辑，兼顾性能与开发效率。