Server-side Rendering vs Static Site Generation in Next.js

NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications.

There can be many advantages of Next.js as:

• Great for SEO.
• Image Optimization – Next.js provide its Image component that improves the performance of the site, and images are only loaded when they enter the viewport, with optional blur-up placeholders.
• API routes – easy creation of API endpoint as a Node.js serverless function.
• Incremental Static Regeneration – allows web developers to update existing pages by re-rendering them in the background as traffic comes in. This way, static content can become dynamic.
• TypeScript support.

Besides all of the fantastic features that Next.js has to offer, there’s one, in particular, that is very powerful and amazing: the ability to use different pre-rendering techniques. These techniques are Server-side rendering, Static site generation, and Incremental static regeneration.

Now, let’s deep dive into the details of the two rendering techniques out of the most commonly used we have.

Server-side Rendering

Server-side rendering (SSR) is where the server sends a ready-to-render HTML page and the JS scripts that are required to make the page interactive. The HTML page is rendered instantly with all the static elements. During the rendering, the browser downloads and executes the JS code after which the HTML page becomes interactive. Now, the interactions on this page will be handled by the browser on the client side. For any new data, the browser will send a request to the server through APIs, and only the newly required information is fetched.

When to use Server-side rendering?

SSR is proposed for apps in which we have to pre-render commonly updated data from external sources. This technique is exceptionally urged when the data cannot be statically generated before a user request takes place and as long as it is expected to be available to search engines. A server-side rendered application enables pages to load faster, improving the user experience. When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.

Method to implement Server-side rendering

If you export a function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
Note:- getServerSideProps only runs on server-side and never runs on the browser.

There can be two situations where this method can be used –

1. First is, it will run at request time, and the page will be pre-rendered with the returned props, when we are requesting the page directly.
2. Second is, Next.js will send an API request to the server, which runs getServerSideProps, when we are requesting the page on client-side page transitions through next/link or next/router.

Example using getServerSideProps 

Static Site Generation

Static Site Generation describes the process of compiling and rendering a website at build time. The output is a cluster of static files, including the HTML, JavaScript and CSS files.
When using SSG with Next.js, the page is pre-rendered at compile time. That means that the user won’t have to wait for the page to load at the browser, the page will simply be rendered.

When to use Static Site Generation?

Static Site Generation are generally used in site like blogs where the content is not updated very often. SSG can be generated prior to a user request. It means that the data will be available at build time, or we can say – on every page where you want to present static content.

Method to implement Static Site Generation?

Next.js pre-renders pages using static generation, which means that it doesn’t fetch any data by default. In any case, if we need to generate a page that includes such kind of data, we can do this in two ways:

1. If the page content depends on external data, use getStaticProps method only.
2. If page paths depend on external data – use the getStaticPaths method in addition to getStaticProps.

Example using getStaticProps and getStaticPaths

Conclusion

Depending on the requirement we can choose which rendering mode we want to implement. Suppose, we are working on simple or non-complex sites like blogs, so in this scenario we can use SSG as the content is static and not changing. Hence all the files will be stored on our server at the build time and, when the user requests for it , it will get loaded in very less time.
Now, in another scenario where the content is dynamic and pages are more complex like in an e-commerce site, we can use SSR . With these tools, building rich web applications has become easier and more fun.