Was ist der Unterschied zwischen einer React Server Component und einer Client Component, und wie entscheidest du, welche du nimmst?

Server Components laufen ausschließlich auf dem Server, zur Request- oder Build-Zeit, und ihr Code landet nie im Browser. Sie können direkt eine Datenbankabfrage awaiten, aber keinen State, keine Effects und keine Event-Handler nutzen. Client Components werden mit der Direktive use client markiert, hydraten im Browser und übernehmen die Interaktivität. Standard ist Server, und die Client-Grenze schiebst du so weit wie möglich nach unten im Baum.

Ich denke darüber so: Server Components sind fürs Daten holen und Markup rendern da, Client Components für alles, was der User anfasst. Eine Server Component läuft auf dem Server, ich kann also direkt darin eine Query awaiten, und weder dieser Code noch seine Dependencies landen im Browser-Bundle. Der Preis ist: kein useState, kein useEffect, kein onClick. Sobald ich eins davon brauche, schreibe ich use client an den Anfang der Datei, und alles, was sie importiert, wandert mit ins Client-Bundle. Mein Standard ist also Server, und ich schiebe die Grenze so weit runter wie möglich. In meinem letzten Projekt hatte ich ein Dashboard, bei dem nur das Filter-Dropdown und der Chart-Tooltip interaktiv waren, das waren zwei kleine Client Components, und der Rest der Seite inklusive eines ziemlich schweren Markdown-Renderers blieb auf dem Server. Worüber Leute stolpern: Props, die die Grenze überqueren, müssen serialisierbar sein, du kannst also keine Funktion nach unten reichen. Das Pattern, das ich stattdessen nutze, ist servergerenderte children in eine Client-Hülle zu reichen.