React Rendering Strategies

A comprehensive, interactive guide to understanding and implementing different React rendering strategies. This project demonstrates various rendering approaches with live examples, visual diagrams, and detailed comparisons.

🌐 Live Demo: render-strategies.emersonbraun.dev
📦 Repository: github.com/emersonbraun/nextjs-render-strategies

🚀 Features

• Interactive Demos: See each rendering strategy in action with live examples
• Visual Diagrams: Understand the flow of each rendering approach
• Side-by-Side Comparisons: Compare rendering modes across key metrics
• Practical Examples: Real-world use cases and code examples
• Multi-language Support: Available in English, Portuguese, Spanish, and Ukrainian
• Modern UI: Built with Tailwind CSS and shadcn/ui components

📚 Rendering Strategies Covered

• CSR - Client-Side Rendering
• SSR - Server-Side Rendering
• SSG - Static Site Generation
• ISR - Incremental Static Regeneration
• RSC - React Server Components
• Streaming - React Streaming with Suspense
• PPR - Partial Prerendering
• Comparison - Side-by-side comparison of all strategies

🛠️ Tech Stack

• Next.js 16 - React framework with App Router (used for this demo)
• React 19 - UI library
• Remix - Full-stack web framework
• TanStack Start - Full-stack React framework
• TypeScript - Type safety
• next-intl - Internationalization
• Tailwind CSS - Styling
• shadcn/ui - UI components
• Biome - Linting and formatting

🏃 Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

📖 Project Structure

src/
├── app/
│   └── [locale]/          # Internationalized routes
│       ├── csr/           # Client-Side Rendering demo
│       ├── ssr/           # Server-Side Rendering demo
│       ├── ssg/           # Static Site Generation demo
│       ├── isr/           # Incremental Static Regeneration demo
│       ├── rsc/           # React Server Components demo
│       ├── streaming/     # Streaming demo
│       ├── ppr/           # Partial Prerendering demo
│       └── comparison/    # Comparison page
├── components/            # Reusable components
├── i18n/                  # Internationalization config
└── lib/                   # Utility functions

🌍 Internationalization

This project supports multiple languages:

• English (en)
• Portuguese (pt)
• Spanish (es)
• Ukrainian (uk)

The default language is English. You can switch languages using the language selector in the navigation.

📝 Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production with Turbopack
• npm run start - Start production server
• npm run lint - Run Biome linter
• npm run format - Format code with Biome

🚢 Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📄 License

This project is open source and available under the MIT License.

👥 Contributors

Thank you to all the wonderful people who have contributed to this project!

Emerson Braun 💻 🎨 🚧

👤 Author

Emerson Braun

• LinkedIn: @emersonbraun
• Twitter/X: @emersonbraun
• GitHub: @emersonbraun

🙏 Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide

---

Made with ❤️ by Emerson Braun