Rendering & Streaming

Next.js rendert eine Seite so effizient wie möglich – statisch, wenn es geht, dynamisch, wenn es sein muss. Und langsame Teile lassen sich streamen, statt die ganze Seite zu blockieren.

Statisch oder dynamisch?

Standardmäßig versucht Next.js, eine Route statisch vorzurendern. Dynamisch wird sie, sobald sie auf laufzeitabhängige Dinge zugreift:

• cookies(), headers(), searchParams
• ein nicht gecachtes fetch
• oder explizit über export const dynamic = 'force-dynamic'

Streaming statt Blockieren

Lädt ein Teil langsam, muss nicht die ganze Seite warten. Zwei Wege:

loading.js – streamt die gesamte Seite eines Segments. Die Datei landet neben der page.js und zeigt sofort einen Ladezustand:

// app/blog/loading.js
export default function Loading() {
    return <p>Beiträge werden geladen …</p>;
}

<Suspense> – gezielter: Der Rest der Seite kommt sofort, nur der eingeklammerte Teil wird nachgeschoben:

import { Suspense } from 'react';

export default function Seite() {
    return (
        <>
            <h1>Blog</h1>
            <Suspense fallback={<p>lädt …</p>}>
                <BeitragsListe />
            </Suspense>
        </>
    );
}

Merke: loading.js ist der schnelle Rundumschlag fürs ganze Segment, <Suspense> das Skalpell für einzelne, langsame Bereiche. Beides sorgt dafür, dass Nutzer sofort etwas sehen.

Damit die Seite auch gefunden wird, fehlen noch Metadaten und SEO.