What is SSG in Next.js?
Server-side generation (SSG) is a technique used in Next.js to generate HTML pages at build time. It allows developers to pre-render pages on the server and deliver them as static HTML files to the client. This strategy has many advantages, including improved performance, search engine optimization (SEO), and better user experience.
Advantages of using SSG in Next.js:
Improved performance: SSG generates static HTML pages, which CDN serves and caches, enhances performance, and loads pages faster.
Better user experience: Instantly available HTML content reduces the time to the first byte, enabling users to see meaningful content quickly and enhancing their overall experience.
Reduced server load: It results in better scalability and cost efficiency as the server is not required to render pages for each request with SSG.
Working
When we use SSG in our Next.js application, export the function getStaticProps from the desired page. Next.js recognizes this function during the build process and generates the page using SSG. By returning a props object from the getStaticProps function, we can also pass props directly to the client-side page.
For standard pages with a single route, solely implementing getStaticProps is sufficient.
export default function Home({ posts }) {
return (
<div>
<h1>Welcome to my SSG</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.body}</p>
</li>
))}
</ul>
</div>
);
}
export async function getStaticProps() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await response.json();
return {
props: {
posts,
},
};
}
In line 18, data is fetched from the specified URL, and the response is assigned to the response variable.
However, for content that requires multiple routes using dynamic routes in Next.js, we need to export a getStaticPaths function along with getStaticProps, enabling Next.js to pre-render all of the paths specified by getStaticPaths.
Requesting HTML file
SSG involves generating static HTML files at build time, which are then served directly to the browser when a user requests a page, resulting in a faster response from the server and providing the user with immediate access to the page content.
The browser requests the server to fetch the requested HTML file, and the server begins processing it after receiving the request. If the server has a pre-prepared HTML file, it promptly responds to the browser's request. The browser receives the HTML file from the server and begins parsing the HTML, building the Document Object Model (DOM) tree.
Once the browser receives the initial HTML file and constructs the DOM, the SPA framework attached to the application takes over. With the SPA framework's involvement, the application becomes fully functional and ready for user interaction, and it is ready to use.
Conclusion
SSG in Next.js is a feature that allows developers to build high-performance websites with dynamic content. It combines the benefits of static site generation with the ability to fetch data at build time. By leveraging SSG, we can create SEO-friendly, cost-effective websites and provide an excellent user experience.
Free Resources
