sanity-live-cache-components

Name: sanity-live-cache-components
Availability: InStock
Author: elzafon

Build cache-first Next.js UIs with Sanity Live and deterministic layout caching.

Updated Aug 23, 2026

Search Tags:#suspense #nextjs #cache-components #sanity #live-editing #draft-mode

Ready to run

npx skills add https://github.com/elzafon/ziska-next --skill sanity-live-cache-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sanity-live-cache-components
Source: https://github.com/elzafon/ziska-next/tree/main/sanity-live-cache-components
Command: npx skills add https://github.com/elzafon/ziska-next --skill sanity-live-cache-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the complexity of building a cache-first UI for Next.js apps with Sanity Live and deterministic layout caching.

Core Features & Use Cases

Three-layer component pattern (Page/Dynamic/Cached) with top-level draftMode resolution.
Explicit perspective and stega per call to ensure stable cache keys and predictable rendering.
Suspense-based streaming for draft content while preserving a fast static shell.

Quick Start

Integrate this pattern by resolving draftMode at the layout level and wrapping dynamic components in Suspense to stream draft content while preserving a cached static shell.

Frequently Asked Questions about sanity-live-cache-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I stream draft content in Next.js while keeping a cached static shell?▼

Stream draft content in Next.js by wrapping dynamic components in Suspense and resolving draftMode at the layout level. This preserves a fast static shell while securely streaming draft content from Sanity Live.

Why are my Next.js cache keys unstable when using Sanity Live?▼

Unstable cache keys occur when perspective and stega settings are not explicit. Enforce explicit perspective and stega keys per Sanity Live call to ensure deterministic cache keys and predictable rendering.

What is the three-layer component pattern for Next.js and Sanity?▼

The three-layer component pattern separates routes into Page, Dynamic, and Cached components. It handles top-level draftMode resolution to ensure deterministic layout caching and safe metadata generation.

Can I use Suspense to stream Sanity draft content in a Next.js production app?▼

Yes, you can use Suspense to stream Sanity draft content in production. The pattern enforces explicit perspective and stega keys alongside top-level draftMode handling to ensure safe metadata generation.

Does Next.js draftMode need to be resolved at the layout level for deterministic caching?▼

Resolving draftMode at the layout level is required for deterministic layout caching. This top-level resolution ensures stable cache keys and predictable rendering across your Next.js and Sanity Live application.

What is the best way to structure a cache-first UI for Next.js apps with Sanity Live?▼

The best way to structure a cache-first UI is enforcing a three-layer component separation with top-level draftMode handling. This ensures deterministic layout caching while streaming draft content via Suspense.