Server Client Page Split
OfficialOptimize Next.js App Router performance with server-client page separation
Authorbytetalent
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a pattern for separating server-side rendering (RSC) from client-side interactivity in Next.js App Router, enhancing performance and maintainability.
Core Features & Use Cases
- Server-Client Separation: Defines clear boundaries between server-side and client-side code.
- Suspense Requirement: Ensures proper lazy loading and performance for pages using
useSearchParams. - Use Cases: Ideal for pages that require server-side data fetching but also benefit from client-side interactivity, such as wizards and entity list pages.
Quick Start
Implement the Server Client Page Split pattern in your Next.js project by creating a 'page.tsx' file for server-side logic and a 'page-client.tsx' file for client-side interactivity.
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 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: Server Client Page Split Download link: https://github.com/bytetalent/docs/archive/main.zip#server-client-page-split 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 620,000+ vetted skills library on demand.