App Router
Menu
Layouts
Nested Layouts
Grouped Layouts
Parallel Routes
File Conventions
Loading
Error
Not Found
Data Fetching
Streaming with Suspense
Static Data
Dynamic Data
Incremental Static Regeneration
Revalidate Path | Tag
ISR Cache STALE
Preview (Draft) Mode
Static page with Query vars
Components
Client Context
Responsive Image
Misc
Client Component Hooks
CSS and CSS-in-JS
Code Snippets
Legacy (Pages Router)
Revalidate Path (pages-router)
ISR Cache STALE (pages-router)
By
View code
or
deploy your own
acme.com
/
context
/
Server Component Boundary
Counter Context Provider [Client Component]
Server Component Boundary
Home
Electronics
Clothing
Books
Counter Context [Client Component]
0 Clicks
Client Context
This example uses context to share state between Client Components that cross the Server/Client Component boundary.
Use children to both render client and server components.
Composition Patterns.
Try incrementing the counter and navigating between pages. Note how the counter state is shared across the app even though they are inside different layouts and pages that are Server Components.
Docs
Code
By
View code
or
deploy your own