This project demonstrates advanced rendering techniques in Next.js, including Server-Side Rendering (SSR), Client-Side Rendering (CSR), and React Server Components with streaming. It is designed as an educational resource to showcase how modern web applications can leverage streaming and partial hydration for improved performance and user experience.
- Streaming Server Components: See how React Server Components enable streaming UI updates for faster perceived load times.
- SSR & CSR Examples: Compare traditional SSR and CSR approaches with streaming.
- Interactive Analytics: Track and visualize page rendering events in real time.
- Modern Next.js Setup: Built with the latest Next.js features, TypeScript, and best practices.
- Install dependencies:
npm ci install
- Run the development server:
npm run dev
- Open http://localhost:3000 to view the app.
app/— Main application code, including subpages for SSR, CSR, and streaming demos.app/(subpages)/analytics/— Analytics provider and event tracking components.app/(subpages)/components/— Shared UI components for jokes and loading states.app/utils/— Utility functions for data fetching.
This repository is intended for developers interested in learning about the latest rendering paradigms in Next.js and React. Explore the code and experiment with different rendering strategies to understand their impact on performance and user experience.