React Server Components: Revolutionizing Frontend Rendering

// app/posts/page.tsx — Server Component with direct data fetching
async function PostsPage() {
  // In Server Components, you can use async/await directly
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: revalidate every hour
  }).then(res => res.json());

  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <ShareButton postId={post.id} />
        </article>
      ))}
    </main>
  );
}

// app/dashboard/page.tsx — Client Component
'use client';

import { useState, useEffect } from 'react';

export default function DashboardPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Client still needs to fetch data via API
    fetch('/api/dashboard').then(res => res.json()).then(setData);
  }, []);

  if (!data) return <LoadingSkeleton />;
  return <DashboardChart data={data} />;
}

// app/page.tsx
import { Suspense } from 'react';

export default function HomePage() {
  return (
    <main>
      <HeroSection /> {/* Renders immediately */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductList /> {/* Streams in */}
      </Suspense>
      <Suspense fallback={<ReviewSkeleton />}>
        <ReviewSection /> {/* Streams in */}
      </Suspense>
    </main>
  );
}

// components/ProductList.tsx
async function ProductList() {
  const products = await fetchProducts(); // May take time
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

// Categorize components into three groups:
// 1. Pure display → Server Component (default)
// 2. Has interactivity → Client Component (add 'use client')
// 3. Mixed → Split into Server + Client

// Before: one large component mixing display and interaction
function Article({ article }) {
  const [comment, setComment] = useState('');
  return (
    <div>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
      <input value={comment} onChange={e => setComment(e.target.value)} />
      <button onClick={() => submitComment(comment)}>Submit</button>
    </div>
  );
}

// After: split into Server + Client
// ArticleContent.tsx (Server Component)
export default function ArticleContent({ article }) {
  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={"{ __html: article.htmlContent }"} />
      {/* markdown rendering lib won't be sent to the client */}
      <CommentForm articleId={article.id} />
    </article>
  );
}

// CommentForm.tsx (Client Component)
'use client';
export default function CommentForm({ articleId }) {
  const [comment, setComment] = useState('');
  return (
    <form>
      <textarea value={comment} onChange={e => setComment(e.target.value)} />
      <button onClick={() => submitComment(articleId, comment)}>Submit</button>
    </form>
  );
}

// Pages Router: getServerSideProps
export async function getServerSideProps(context) {
  const data = await fetchData(context.params.id);
  return { props: { data } };
}

// App Router: directly async in Server Component
export default async function Page({ params }) {
  const data = await fetchData(params.id);
  return <DataView data={data} />;
}

// For cross-component shared state, use URL searchParams instead of global state
// Server Components can read searchParams directly

// app/search/page.tsx
export default async function SearchPage({ searchParams }) {
  const query = searchParams.q || '';
  const results = await searchProducts(query);
  return (
    <div>
      <SearchInput defaultValue={query} />
      <SearchResults results={results} />
    </div>
  );
}

// Wrong: Server Components can't use window/document
export default function Page() {
  const width = window.innerWidth; // ReferenceError!
  return <div>{width}</div>;
}

// Correct: use in a Client Component
'use client';
import { useState, useEffect } from 'react';
export default function WindowSize() {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
    window.addEventListener('resize', () => setWidth(window.innerWidth));
  }, []);
  return <span>{width}px</span>;
}

// Wrong: functions can't be serialized
<ServerComponent onClick={() => {}} /> // TypeError!

// Correct: pass Client Components through children
<ServerComponent>
  <ClientButton onClick={() => {}} />
</ServerComponent>

// Anti-pattern: marking the entire page as a Client Component
'use client';
export default function Page() {
  // Most of this page is actually static content
  // Only the search box needs interactivity
  return <div>...lots of static content...</div>;
}

// Recommended: only add 'use client' to the interactive part
// page.tsx (Server Component)
export default function Page() {
  return <div>...static content...<SearchBox /></div>;
}

// SearchBox.tsx (Client Component)
'use client';
export default function SearchBox() { ... }