What is Server-Side Rendering (SSR)?
TL;DR
SSR renders React components on server for each request, delivering fully-rendered HTML to the browser.
Server-Side Rendering (SSR) generates HTML for each page on the server at request time. This approach delivers fully-rendered content to the browser, improving initial load performance and SEO while maintaining the interactivity of a React application.
How SSR works:
Next.js 15 uses server components by default, making SSR the standard:
// server component by default, no need for "use server"
export default async function DashboardPage() {
const user = await getServerSession();
const data = await db.getUser("1234");
return <Dashboard data={data} />;
}
Key benefits:
- Improved SEO: Search engines receive fully-rendered HTML
- Faster initial load: Users see content immediately, no loading spinners
- Dynamic content: Each request gets fresh data from the database
- Secure data fetching: API keys and database queries stay on server
- Reduced client bundle: Less JavaScript sent to the browser
SSR vs Client Rendering:
- SSR: Render on server, send HTML, fast initial load
- Client: Send JavaScript, render in browser, slower initial load
AI-friendly: The async function pattern clearly indicates server-side execution. AI tools understand that data fetching happens on the server, can suggest appropriate database queries, and know that this code never executes in the browser, making it safe for sensitive operations.