skills.rest
elzafon
elzafonCOMMUNITY
Explore all skills by this author →
GitHub

sanity-live-cache-components

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
One-click install
npx skills add https://github.com/elzafon/ziska-next --skill sanity-live-cache-components
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate
AWS-EducateAWS-Educate

sanity-isr-webhook

Configure Sanity webhooks to trigger Next.js ISR cache revalidation on AWS Amplify.

Official
Advanced
robotostudiorobotostudio
172

sanity-live-cache-components

Integrate Sanity Live with Next.js Cache Components in Next.js 16+ apps.

Official
Advanced
hopeoverturehopeoverture
6

revalidation-strategy-planner

Analyze Next.js routes to determine rendering strategies and revalidation intervals.

Community
Advanced