Server Components vs Client Components en Next.js : la bonne architecture"

// ✅ Server Component (défaut)
export default async function Article({ id }) {
  const data = await fetch(`/api/articles/${id}`).then(r => r.json());
  return <div>{data.title}</div>;
}

// ❌ Problème : impossible d'utiliser useState, onClick, etc.

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clique : {count}
    </button>
  );
}

// page.tsx — Server Component
export default async function Page() {
  const articles = await fetch(
    `${process.env.NEXT_PUBLIC_API}/articles`
  ).then(r => r.json());

  return (
    <div>
      <ArticleList articles={articles} /> {/* Passe les données */}
    </div>
  );
}

// components/ArticleList.tsx — peut être Client Component
"use client";

export default function ArticleList({ articles }) {
  const [filter, setFilter] = useState("");
  // Utilise articles directement, pas besoin de refetch
  return (
    <div>
      <input onChange={(e) => setFilter(e.target.value)} />
      {articles.filter(a => a.title.includes(filter)).map(a => (
        <div key={a.id}>{a.title}</div>
      ))}
    </div>
  );
}

// Ajoute au package.json pour voir la taille du bundle
"analyze": "ANALYZE=true next build"

// Puis lance :
// pnpm analyze