Next.js SSR + CSR Demo
Server-Side Rendering (SSR)
Server Component
Hello from the server!
Rendered at: 2026-03-11T03:45:22.120Z
This component fetches data on the server. Refresh to see new timestamp.
Client-Side Rendering (CSR)
Client Component
Interactive counter with useState
0
This component uses useState and runs in the browser.
Project Structure
app/
├── components/
│ ├── ServerData.tsx # Server Component
│ └── ClientCounter.tsx # Client Component ('use client')
├── api/
│ └── hello/route.ts # API Route
├── lib/
│ └── utils.ts # Utilities
├── layout.tsx # Root Layout
└── page.tsx # This page