# React Server Components: The Future of React React Server Components (RSC) represent a fundamental shift in how we think about React applications. Let's explore what they are and why they matter. ## What Are Server Components? Server Components are React components that run only on the server. They never ship JavaScript to the client. ```jsx // This is a Server Component (default in Next.js 13+) async function BlogPost({ slug }) { const post = await db.posts.findOne({ slug }); return (

{post.title}

{post.content}

); } ``` Key benefits: - **Zero client JS**: Smaller bundle sizes - **Direct database access**: No API needed - **Automatic code splitting**: Only interactive code ships to client ## Server vs Client Components ### Server Components (default) ```jsx // app/Post.jsx async function Post() { const data = await fetch('...'); return

{data.title}

; } ``` Can: - Use async/await - Access backend resources directly - Use Node.js APIs Cannot: - Use state or effects - Use browser APIs - Add event listeners ### Client Components ```jsx 'use client'; // Opt-in directive import { useState } from 'react'; export function Counter() { const [count, setCount] = useState(0); return ( ); } ``` Can: - Use hooks (useState, useEffect, etc.) - Use browser APIs - Add interactivity Must: - Ship JavaScript to client - Be marked with 'use client' ## Composition Patterns ### Server Component with Client Children ```jsx // Server Component async function Page() { const post = await getPost(); return (

{post.title}

{/* Client component for interactivity */}

); } // Client Component 'use client'; function LikeButton({ postId }) { const [liked, setLiked] = useState(false); return ; } ``` ### Passing Server Components as Props ```jsx // Client Component that accepts children 'use client'; function Tabs({ children }) { const [tab, setTab] = useState(0); return

{children[tab]}

; } // Server Component async function Page() { const data1 = await getData1(); const data2 = await getData2(); return ( ); } ``` ## Data Fetching ### Parallel Fetching ```jsx async function Page() { // These run in parallel const [posts, users] = await Promise.all([ getPosts(), getUsers() ]); return ; } ``` ### Sequential Fetching ```jsx async function Post({ id }) { const post = await getPost(id); const author = await getAuthor(post.authorId); return ; } ``` ### Streaming with Suspense ```jsx import { Suspense } from 'react'; function Page() { return (

My Page

); } async function SlowComponent() { const data = await slowDataFetch(); return

{data}

; } ``` ## Caching Strategies Next.js provides automatic caching: ```jsx // Cached by default async function getData() { const res = await fetch('https://api.example.com/data'); return res.json(); } // Revalidate every hour async function getData() { const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } }); return res.json(); } // No caching async function getData() { const res = await fetch('https://api.example.com/data', { cache: 'no-store' }); return res.json(); } ``` ## Real-World Example: Blog ```jsx // app/blog/[slug]/page.jsx (Server Component) async function BlogPost({ params }) { const post = await db.posts.findOne({ slug: params.slug }); const related = await db.posts.find({ category: post.category }).limit(3); return (

{post.title}

); } // Client Component 'use client'; function LikeButton({ postId }) { const [liked, setLiked] = useState(false); const [count, setCount] = useState(0); const handleLike = async () => { await fetch(`/api/posts/${postId}/like`, { method: 'POST' }); setLiked(true); setCount(count + 1); }; return ( ); } ``` ## Migration Strategy Moving from Client-only to RSC: 1. **Start with Server Components**: Default to server 2. **Add 'use client' only when needed**: Interactivity, hooks, browser APIs 3. **Push client boundaries down**: Keep as much on server as possible 4. **Use composition**: Server components can have client children ## Performance Benefits Real-world improvements: - **Smaller bundle sizes**: Up to 60% reduction - **Faster initial load**: Less JavaScript to parse - **Better SEO**: Content rendered on server - **Improved streaming**: Progressive rendering ## Common Pitfalls ### 1. Using Server-only Code in Client Components ```jsx ❌ 'use client'; import fs from 'fs'; // Error: Node.js APIs not available ✅ Remove 'use client' or move to server component ``` ### 2. Not Using 'use client' When Needed ```jsx ❌ function Component() { const [state, setState] = useState(0); // Error } ✅ 'use client'; function Component() { const [state, setState] = useState(0); } ``` ### 3. Over-using Client Components ```jsx ❌ 'use client'; // At top of every file ✅ Only mark interactive components ``` ## Conclusion React Server Components are not a replacement for client components—they're a complement. Use server components for: - Data fetching - Heavy computations - Direct database access - Reducing bundle size Use client components for: - Interactivity - Browser APIs - State management - Event handlers The future of React is a mix of both, using each where it makes the most sense.

#React

React Server Components: The Future of React