Next.js SSG vs SSR
Next.js is one of the most widely used React frameworks today. Its popularity comes from the developer experience it provides through features that don’t come out of the box with React. These features include code-splitting and bundling, file-system routing, image optimization, and more. Two major features that I’ll be talking about today is Static Site Generation (SSG) and Server-Side Rendering (SSR).
What is Static Site Generation?
SSG happens when the HTML of a site is generated at build-time. The HTML is then re-used for each request. A static site can be created with Next.js by running the next build command. This will build the site for production and generate static HTML files to be served. Now when a user navigates to a route in the website, they will be served with the static HTML file. That HTML file will be cached on each request. Below is an example of a page that will render its content as a static HTML page after running the next build command
function Home() {
return (
<h1>Static Title</h1>
<p>Static text.</p>
)
}
Static Site Generation with external data
There are two types of SSG for Next.js. One is with data and without data. In the first example, there was no data gathered during the build process. An example of SSG with data would be fetching data from a content management system. When running the next build command, our site will fetch the data from the content management system at build time. Once the data is retrieved it will generate the static HTML with the data that was fetched.
Below is an example of how to fetch external data with SSG. Next.js requires a getStaticProps function to be exported within the file. Inside that function is where the data fetching takes place. getStaticProps returns the fetched data and the page function named Home receives it as props.
function Home({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}}
</ul>
)
}
export async function getStaticProps(context) {
const res = await fetch(url);
const data = await res.json();
return {
props: {
posts: data.posts
}
}
}
Benefits of SSG
SSG can be used to build different types of pages. These include Marketing pages, Blog posts, help and documentation pages. Benefits of SSG include
Great for SEO
Served by CDN
Fast serving time
External data for page is available immediately
Server-Side Rendering
Server-side rendering is when a page is generated on each request. This strategy is commonly used when a page contains a large amount of dynamic data and needs to be updated regularly. An example of this would be a Twitter news feed page. There are many pieces of data on the Twitter news feed that needs to be dynamic. Examples of this include the number of likes, retweets, and comments. This data needs to always be up to date and refreshed.
To use Server-side Rendering for a page, you need to export an async function called getServerSideProps. This function will be called by the server on every request.
function Home({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
Pros and Cons of Static Site Generation and Server Side Rendering
With Static Site Generation, Next.js pre-renders the HTML at build time. This will result in faster page loads because the HTML can be cached by a global CDN. With Server-Side rendering, Next.js pre-renders the HTML on the server on every request. This is beneficial when your page is dealing with dynamic data that needs to always be up to date. One drawback of static site generation is that it could lead to stale data at request time, meaning that the time to first byte of your page is slower.
Conclusion
Regardless of what page rendering strategy is used for a site, Next.js makes it an easy and pleasant experience to work with. It is likely that more companies will make the move to Next.js as their framework of choice because of its developer-friendly functionality and flexibility that makes developing different types of websites and applications effortless.