sakilanwar12/nextjs-typescript-skills

Récupération de données Next.js

Règles

1. Effectuez les fetchs dans les composants serveur avec async/await. N'utilisez pas useEffect pour les données initiales.
2. fetch() est mis en cache par défaut dans App Router, sauf si { cache: 'no-store' } ou next: { revalidate } précise le contraire. Sachez ce que vous voulez.
3. Parallélisez les requêtes indépendantes avec Promise.all. Séquencez uniquement lorsqu'elles sont dépendantes.
4. Enveloppez les sections lentes dans <Suspense fallback> + loading.tsx pour le streaming.
5. Utilisez next: { tags: ['posts'] } + revalidateTag('posts') pour l'invalidation à la demande.
6. Utilisez la récupération côté client (SWR/React Query) uniquement pour les interfaces interactives/filtrées — pas pour le premier affichage.

Schémas

// Statique avec revalidation (ISR)
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error('Échec de la récupération des posts');
  return res.json();
}

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

// Parallèle dans un composant serveur
export default async function Dashboard() {
  const [user, posts] = await Promise.all([getUser(), getPosts()]);
  return <View user={user} posts={posts} />;
}

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

// app/api/revalidate/route.ts — revalidation à la demande
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

• Les fetchs sont dans des composants serveur, pas dans useEffect ?
• Le mode de cache est explicite (revalidate, no-store, ou tags) ?
• Les requêtes indépendantes sont parallélisées ?
• Une limite Suspense est-elle présente pour les parties lentes ?
• Les erreurs sont-elles gérées (throw → error.tsx, ou repli gracieux) ?