ssr-zero-layout-shift
CommunityEliminate CLS with SSR-first UI patterns.
System Documentation
What problem does it solve?
SSR-first rendering with zero layout shift eliminates CLS by ensuring server-rendered shells with client islands, and dynamic holes that fill without layout shifts; this approach improves perceived performance and stability of data-driven UIs.
Core Features & Use Cases
Seven composable patterns: server component shells with Client Component islands, Suspense boundaries as static-shell-with-dynamic-holes, selective hydration, lazy-loaded client components via next/dynamic, dimension-matched skeleton fallbacks, interaction-triggered data fetching, and one-shot Redux hydration. Use this strategy for pages, forms, dashboards, data tables, and any UI that fetches data, to prevent layout instability during loading.
Quick Start
Apply SSR-first patterns to your Next.js pages to eliminate CLS during data loading.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ssr-zero-layout-shift Download link: https://github.com/armanisadeghi/ai-matrx/archive/main.zip#ssr-zero-layout-shift Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.