sakilanwar12/nextjs-typescript-skills

Next.js Data Fetching

Rules

1. Fetch in Server Components with async/await. Don't use useEffect for initial data.
2. fetch() is cached by default in App Router unless { cache: 'no-store' } or next: { revalidate } says otherwise. Know which you want.
3. Parallelize independent requests with Promise.all. Sequence only when dependent.
4. Wrap slow sections in <Suspense fallback> + loading.tsx for streaming.
5. Use next: { tags: ['posts'] } + revalidateTag('posts') for on-demand invalidation.
6. Client-side fetching (SWR/React Query) only for interactive/filtered UI — not for first paint.

Patterns

// Static with revalidation (ISR)
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

// Dynamic, never cached
async function getInbox(userId: string) {
  const res = await fetch(`https://api.example.com/inbox/${userId}`, {
    cache: 'no-store',
  });
  return res.json();
}

// Parallel in a Server Component
export default async function Dashboard() {
  const [user, posts] = await Promise.all([getUser(), getPosts()]);
  return <View user={user} posts={posts} />;
}

// Streaming a slow section
import { Suspense } from 'react';
export default function Page() {
  return (
    <div>
      <FastHeader />
      <Suspense fallback={<CommentsSkeleton />}>
        <SlowComments />
      </Suspense>
    </div>
  );
}

// app/api/revalidate/route.ts — on-demand revalidation
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 });
}

Checklist

• Server Component fetch, not useEffect?
• Cache mode explicit (revalidate, no-store, or tags)?
• Independent requests parallelized?
• Suspense boundary for slow parts?
• Errors handled (throw → error.tsx, or graceful fallback)?