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).

Patrones de arquitectura Next.js 16, primero estáticos: shells en caché con ranuras dinámicas, islas de proveedores, límites de 'uso de caché' y estrategia de precarga de enlaces. Úselo al crear o refactorizar rutas Next.js para maximizar la representación estática, implementar 'usar caché' con personalización dinámica, dividir la entrada frente a los renderizadores estáticos, determinar el alcance de los proveedores de clientes o ajustar el comportamiento de captación previa. Se activa en 'shell estático', 'usar patrón de caché', 'ranuras dinámicas', 'isla de proveedor', 'estrategia de captación previa', 'estático primero', 'límite de caché', 'la ruta se vuelve dinámica inesperadamente' o cualquier trabajo de arquitectura Next.js que implique representación mixta estática/dinámica. Fuente: joelhooks/joelclaw.