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，可实现端到端的渲染与交互逻辑，兼顾性能与开发效率。