Next.js-Interviewfragen

Was ist der Unterschied zwischen SSR, SSG, ISR und CSR? Wann setzt man welches ein?

SSG baut das HTML zur Deploy-Zeit — am schnellsten und billigsten, richtig für Inhalte, die sich selten ändern. SSR rendert pro Request und ist nötig, wenn die Seite vom User abhängt oder von Daten, die aktuell sein müssen. ISR liefert eine statische Seite aus und regeneriert sie im Hintergrund nach einem Revalidierungsintervall — statische Geschwindigkeit bei ausreichend frischen Daten. CSR rendert im Browser und eignet sich für Dashboards hinter einem Login, wo SEO keine Rolle spielt.

Was sind React Server Components, und wie unterscheiden sie sich von Client Components?

Server Components laufen ausschließlich auf dem Server, können also direkt eine Datenbank abfragen oder Dateien lesen und schicken ihren Code nie zum Browser. Sie können weder State noch Effects noch Browser-APIs nutzen. Client Components sind das klassische React-Modell und werden für Interaktivität gebraucht. Das Pattern lautet: Seiten als Server Components halten und "use client" so weit wie möglich nach unten im Baum schieben, damit das Bundle klein bleibt.

Wozu braucht man die "use client"-Direktive?

Im App Router ist jede Komponente standardmäßig eine Server Component; "use client" markiert die Grenze, ab der das Client-Bundle beginnt. Alles, was unterhalb dieser Grenze importiert wird, geht an den Browser — deshalb macht ein "use client" am Anfang eines Layouts versehentlich den ganzen Teilbaum client-seitig. Ohne die Direktive wirft der Aufruf von useState oder das Anhängen eines onClick-Handlers schon beim Build einen Fehler.

Wie funktioniert Caching im App Router? Was ist revalidate?

Next cached auf mehreren Ebenen: den Fetch-Result-Cache, den Full-Route-Cache für gerenderten Output und den Client-Router-Cache für Navigationen. revalidate legt fest, wie lange ein gecachter Eintrag als frisch gilt — entweder pro Fetch oder als Export aus dem Route-Segment. Für ereignisgesteuerte Updates ruft man nach einer Mutation revalidatePath oder revalidateTag auf, was präziser ist als ein Zeitfenster.

Was sind Server Actions, und wann nutzt man sie?

Eine Server Action ist eine async-Funktion, markiert mit "use server", die eine Client Component direkt aufrufen kann, während Next die Serialisierung und den Netzwerk-Roundtrip übernimmt. Sie ersetzt das Schreiben einer API-Route für einfache Mutationen wie Formular-Submits und lässt sich gut mit revalidatePath kombinieren, um Daten danach zu aktualisieren. Weil darunter ein öffentlicher Endpoint steckt, müssen Input-Validierung und Autorisierungsprüfung trotzdem stattfinden.

Wie optimiert next/image Bilder?

Es erzeugt responsive Varianten in modernen Formaten wie WebP und AVIF, liefert die Größe passend zum Viewport aus, lädt standardmäßig lazy und reserviert Platz im Layout, damit die Seite nicht springt. Genau die Pflicht zu expliziten width- und height-Angaben oder dem fill-Prop eliminiert Cumulative Layout Shift. Das Ergebnis ist meist die größte einzelne Core-Web-Vitals-Verbesserung in einer Next-App.

Was sind Streaming und Suspense in Next.js?

Streaming schickt HTML in Häppchen an den Browser, sobald sie fertig sind, statt auf die langsamste Datenquelle zu warten. Umgibt man eine langsame Komponente mit Suspense und einem Fallback, kann der Rest der Seite sofort rendern, während dieser Abschnitt später nachkommt. In der Praxis heißt das: Ein langsames Produktempfehlungs-Widget verzögert nicht mehr die gesamte Seite, was die gefühlte Performance und die Time to First Byte verbessert.

Wie implementiert man dynamische Metadaten für SEO?

Exportiere generateMetadata aus einer Page oder einem Layout — die Funktion bekommt die Route-Params, kann auf Daten warten und gibt title, description, canonical und Open-Graph-Felder zurück. Für statische Seiten reicht der einfachere metadata-Export. Legst du eine opengraph-image-Datei im Route-Ordner ab, generiert Next automatisch das Social-Preview-Bild für diese Route.