Loading post...
How Next.js Server Components fundamentally change the way we build web applications and why the future is streaming HTML
rayanstudio
Server Components aren't just a feature. They're a fundamental rethinking of how React works.
Modern Web Architecture
Traditional React:
Server → JSON → Client → React → DOMServer Components:
Server → React → Serialized Component Tree → Client → HydrationThe crucial difference: Components run on the server.
// app/dashboard/page.tsx
import { db } from '@/lib/database';
import { UserStats } from './UserStats';
import
What just happened?
useEffect to fetch dataServer Components stream. This changes everything:
import { Suspense } from 'react';
export default function Page() {
return (
{/* Renders immediately */}
}>
{/* Streams in when ready */}
}>
{/* Streams independently */}
{/* Renders immediately */}
);
}Timeline:
0ms: Header + Footer + Skeletons
500ms: SlowComponent ready, stream update
1200ms: AnotherSlowComponent ready, stream updateData Streaming Visualization
'use client'; // Client Component
import { useState } from 'react';
import { ServerData } from './ServerData'; // Server Component
export function InteractiveWidget({ initialData }) {
const [count, setCount] = useState(0);
return (
Rules:
Traditional approach:
import { format } from 'date-fns'; // 67KB
import { sanitizeHtml } from 'sanitize-html'; // 53KB
export function BlogPost({ post }) {
return (
{format(post.date, 'PPP')}
);
Client bundle: +120KB
Server Component approach:
import { format } from 'date-fns';
import { sanitizeHtml } from 'sanitize-html';
// Server Component - libraries stay on server
export default async function BlogPost({ slug }) {
const post = await db.post.findBySlug(slug);
return (
{
Client bundle: +0KB
async function ParentComponent() {
// These run in parallel automatically
const [users, posts] = await Promise.all([getUsers(), getPosts()])
return <></>
}async function Component() {
const user = await getUser();
return (
{user.name}
}>
);
}
async function UserPosts({ userId }) {
const posts = await getPosts(userId);
Deploy Server Components to the edge:
export const runtime = 'edge'
export default async function Page() {
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 },
})
return
}Latency: Global average < 50ms
This is the future. The server is back, but this time it's React all the way down.