1
Browser requests URL
2
  ￬
3
Server returns an almost empty HTML (only one <div id="root"></div>)
4
  ￬
5
Browser downloads JS Bundle
6
  ￬
7
JS executes, generates HTML and inserts it into the page
8
  ￬
9
✅ Page is interactive

1
<!-- HTML returned by the server -->
2
<!DOCTYPE html>
3
<html>
4
<head>
5
    <title>My SPA</title>
6
</head>
7
<body>
8
    <div id="root"></div>
9
    <script src="/bundle.js"></script>
10
</body>
11
</html>

1
Browser requests URL
2
  ￬
3
Server executes JS / renders components
4
  ￬
5
Server generates complete HTML (including data)
6
  ￬
7
Browser receives complete HTML → renders directly
8
  ￬
9
JS "hydration", page becomes interactive
10
  ￬
11
✅ Page is interactive

1
import { renderToString } from 'react-dom/server';
2

3
app.get('/article/:id', async (req, res) => {
4
    const article = await db.getArticle(req.params.id);  // Query the database
5
    const html = renderToString(<ArticlePage data={article} />);
6

7
    res.send(`
8
        <!DOCTYPE html>
9
        <html>
10
        <head><title>${article.title}</title></head>
11
        <body>
12
            <div id="root">${html}</div>
13
            <script src="/bundle.js"></script>
14
        </body>
15
        </html>
16
    `);
17
});

1
Server-rendered HTML (a dry, bare page)
2
  + JS loading + event binding
3
  = an interactive page (it's "alive")

1
At build time:
2
  Read data (Markdown / API / CMS)
3
    ￬
4
  Pre-render all pages into pure HTML
5
    ￬
6
  Output static files to dist/
7

8
At request time:
9
  Browser requests URL
10
    ￬
11
  CDN / static server directly returns the pre-generated HTML
12
    ￬
13
  ✅ Extremely fast response

1
// Runs at build time, generates static HTML
2
export async function getStaticPaths() {
3
    const posts = await getAllPosts();
4
    return posts.map(post => ({
5
        params: { slug: post.slug }
6
    }));
7
}
8

9
export async function getStaticProps({ params }) {
10
    const post = await getPost(params.slug);
11
    return { props: { post } };
12
}

1
// SSG: default behavior, generated at build time
2
export default function AboutPage() {
3
    return <div>About Us</div>;
4
}
5

6
// SSR: regenerated on every request
7
export const dynamic = 'force-dynamic';
8

9
// ISR: Incremental Static Regeneration — SSG + scheduled updates
10
export const revalidate = 3600; // Regenerate every 3600 seconds (1 hour)

1
---
2
// This part runs at build time
3
const posts = await getAllPosts();
4
---
5

6
<!-- Static content, output HTML directly -->
7
<h1>My Blog</h1>
8
{posts.map(post => <article>{post.title}</article>)}
9

10
<!-- "Island": this component renders on the client, preserving interactivity -->
11
<LikeButton client:load />
12
<CommentSection client:visible />