sakilanwar12/nextjs-typescript-skills

Next.js 数据获取

规则

1. 在服务器组件中使用 async/await 进行数据获取。不要使用 useEffect 处理初始数据。
2. 在 App Router 中，fetch() 默认是缓存的，除非指定 { cache: 'no-store' } 或 next: { revalidate }。请明确你所期望的行为。
3. 使用 Promise.all 并行化独立请求，仅在依赖时按顺序执行。
4. 将较慢的片段包裹在 <Suspense fallback> + loading.tsx 中以实现流式传输。
5. 使用 next: { tags: ['posts'] } + revalidateTag('posts') 进行按需失效。
6. 客户端数据获取（SWR/React Query）仅用于交互式/筛选型 UI——不用于首次渲染。

模式

// 带重新验证的静态数据（ISR）
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error('获取文章失败');
  return res.json();
}

// 动态数据，永不缓存
async function getInbox(userId: string) {
  const res = await fetch(`https://api.example.com/inbox/${userId}`, {
    cache: 'no-store',
  });
  return res.json();
}

// 在服务器组件中并行请求
export default async function Dashboard() {
  const [user, posts] = await Promise.all([getUser(), getPosts()]);
  return <View user={user} posts={posts} />;
}

// 流式传输较慢的片段
import { Suspense } from 'react';
export default function Page() {
  return (
    <div>
      <FastHeader />
      <Suspense fallback={<CommentsSkeleton />}>
        <SlowComments />
      </Suspense>
    </div>
  );
}

// app/api/revalidate/route.ts — 按需重新验证
import { revalidateTag } from 'next/cache';
export async function POST(req: Request) {
  const { tag, secret } = await req.json();
  if (secret !== process.env.REVALIDATE_SECRET)
    return Response.json({ ok: false }, { status: 401 });
  revalidateTag(tag);
  return Response.json({ ok: true });
}

检查清单

• 使用的是服务器组件 fetch，而不是 useEffect？
• 缓存模式是否明确（revalidate、no-store 或 tags）？
• 独立请求是否已并行化？
• 是否为较慢部分设置了 Suspense 边界？
• 是否处理了错误（throw → error.tsx，或优雅降级）？