Server-Side Rendering (SSR) and Static Site Generation (SSG)

sonydaman



Certainly! Let’s delve into the fascinating world of Server-Side Rendering (SSR) and Static Site Generation (SSG) in the context of Next.js. 🚀

Server-Side Rendering (SSR)

In Next.js, Server-Side Rendering (SSR) involves rendering a fully frontend application on the server rather than in the browser. The process goes like this:

  1. The server generates the HTML for a page.

  2. The rendered HTML is sent to the client (web browser).

  3. The client displays the page.

Advantages of SSR:

  • Improved performance: Fully-rendered HTML pages enhance performance and SEO.

  • Compatibility with Multi-Page Applications (MPAs).

Example of SSR in Next.js:

export default (req, res) => {
// Render the App component to a string
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>SSR Page</title>
</head>
<body>
<main>${html}</main>
</body>
</html>
`);
};

Static Site Generation (SSG)

Static Site Generation (SSG) creates a website as a set of static HTML files. Unlike dynamic web applications, SSG generates static content that doesn’t change frequently. Benefits include performance and scalability, especially for content-heavy sites.

Next.js supports SSG using the getStaticProps and getStaticPaths functions. Here’s an example of generating a list of blog posts:

import { getStaticProps, getStaticPaths } from 'next';
import matter from 'gray-matter';
import fs from 'fs';
import path from 'path';

const contentDirectory = 'content/posts';

export const getStaticPaths = async () => {
const fileNames = fs.readdirSync(contentDirectory);
const paths = fileNames.map((filename) => ({
params: { slug: filename.replace('.md', '') },
}));
return { paths, fallback: false };
};

export const getStaticProps = async ({ params: { slug } }) => {
const markdownWithMetadata = fs.readFileSync(
path.join(contentDirectory, `${slug}.md`)
);
const { data, content } = matter(markdownWithMetadata);
return { props: { post: { ...data, content } } };
};

const BlogPost = ({ post }) => {
return (
<>
<h1>{post.title}</h1>
<p>{post.description}</p>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</>
);
};


Choosing Between SSR and SSG

  • Use SSR when you need fully-rendered HTML pages and dynamic content.

  • Opt for SSG when your site can benefit from static hosting and infrequent updates.

Remember, mastering these techniques empowers you as a modern web developer. Happy coding! 🌟



0 Comments