nextjs-static-shells

Build a static shell first, then cut small dynamic holes where personalization or request-specific behavior is required.

| Static | Synchronous, pure computation | Our Blog | | Cached ('use cache') | Async but deterministic for given inputs | db.posts.findMany() with cacheLife('hours') | | Dynamic (Suspense) | Runtime/request-specific, must be fresh | cookies(), user session, notifications |

Built-in profile shortcuts: 'use cache' alone → 5m stale / 15m revalidate. 'use cache: remote' → platform KV. 'use cache: private' → allows runtime APIs (compliance escape hatch).

Static-first Next.js 16 Architekturmuster: zwischengespeicherte Shells mit dynamischen Slots, Anbieterinseln, „Cache verwenden“-Grenzen und Link-Preloading-Strategie. Verwenden Sie diese Option, wenn Sie Next.js-Routen erstellen oder umgestalten, um das statische Rendering zu maximieren, „Cache verwenden“ mit dynamischer Personalisierung zu implementieren, Einträge von statischen Renderern aufzuteilen, den Umfang von Client-Anbietern festzulegen oder das Prefetch-Verhalten zu optimieren. Löst auf „Statische Shell“, „Cache-Muster verwenden“, „Dynamische Slots“, „Anbieterinsel“, „Prefetch-Strategie“, „Statisch zuerst“, „Cache-Grenze“, „Route wird unerwartet dynamisch“ oder jede Next.js-Architekturarbeit aus, die gemischtes statisches/dynamisches Rendering beinhaltet. Quelle: joelhooks/joelclaw.