---

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

keywords:

• Next.js
• App Router
• Server Actions
• 数据获取
• 缓存

description: 基于 App Router 的数据获取与 Server Actions 表单处理示例，覆盖缓存与再验证策略。

categories:

• 文章资讯
• 技术教程

---

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