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

--- 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 实战 ## 页面数据获取 ```tsx // 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

{JSON.stringify(data, null, 2)}

; } ``` ## Server Actions 表单 ```tsx // 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 (

提交

); } ``` ## 缓存策略 - 使用 `revalidate` 进行 ISR；对实时接口使用 `cache: 'no-store'` ## 总结 结合 App Router 的数据获取与 Server Actions，可实现端到端的渲染与交互逻辑，兼顾性能与开发效率。