SSR — Explained with Examples

Server-Side Rendering (SSR) generates HTML on the server for each request, improving initial load time and SEO for JavaScript applications.

SSR renders the application’s HTML on the server and sends a fully-formed page to the client. After the initial HTML loads, the JavaScript bundle hydrates the page, attaching event handlers and making it interactive. Next.js (React) and Nuxt (Vue) are prominent SSR frameworks. SSR combines the SEO and initial-load benefits of MPAs with the interactive capabilities of SPAs.

Think of SSR like a restaurant that sends a fully-cooked meal to your table (server-rendered HTML). You can eat immediately (see content). The waiter then brings condiments and tools (JavaScript hydration) so you can customize your experience. Without SSR, you get raw ingredients and a recipe — you must cook it yourself before eating.

SSR adds server CPU load and complexity compared to static or client-only rendering. Each request requires the server to execute the application and generate HTML.

// Next.js page (React with SSR)
export async function getServerSideProps(context) {
    // Runs on server for every request
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();

    return {
        props: { posts },  // Passed to the React component
    };
}

function Blog({ posts }) {
    return (
        <div>
            <h1>Blog Posts</h1>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

export default Blog;

SSR is ideal for dynamic content that changes frequently and needs good SEO. For content that changes less often, consider SSG or ISR for better performance.

SSG, ISR, SPA, MPA

SSG vs SSR