Next.Js and Server-side rendering.
By: Anish B.K.
Tags: Server Side Rendering, React, Nextjs

Currently React is one of the most popular JavaScript framework to create dynamic UI. Created by Facebook, React is being loved by developers all around the world. Usually, we are running React on client side, i.e, Javascript is interpreted by the browser. The initial html returned by the server contains a placeholder, e.g. <div id="root"></div> , and then, once all your scripts are loaded, the entire UI is rendered in the browser. We call it client-side rendering. One of the con of client-side rendering is, it does not go well with SEO(Search Engine Optimization).

We can render our application on server side using React, but the process will be twisted, and lets be honest we as developers, don’t want more twisted things.

Here comes Next.js to the rescue. Next.js is a React framework which on its documentation claims to have the best-in-class “Developer Experience” which I think is true as well. Some of its features are:

The above provided link will guide you through the documentation of Next.js. If you want to learn about it, I request you to have a look through it.

Here, I will be sharing my knowledge about the server-side rendering.

What actually is server-side Rendering?

This is the question that came into my mind when I came to know about it.

Server Side Rendering (SSR) is the process of taking a client-side JavaScript Framework website and rendering it to static HTML and CSS on the server.

Why is this important? We all want fast loading websites and SSR is a tool to help you get your website rendered faster. SSR flips the process of rendering a JavaScript framework app and when done right can give your users a better page load.

During my research I came through this meme, which was quite funny and also provides the abstract of the server-side rendering.

Server-side rendering on Next.js

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive.

Next.js has two forms of pre-rendering:

Static Generation: The HTML is generated at build time and will be reused on each request. Server-side Rendering: The HTML is generated on each request.

I will not be covering about Static Generation on this article, so lets dive into server-side rendering.

Server-side Rendering

If a page uses server-side rendering (also referred as “SSR” or “Dynamic Routing”, the page HTML is generated on each request. To use Server-side Rendering for a page, you need to export an async function called getServerSideProps . On doing so, Next.js will pre-render the page on each request using the data returned by getServerSideProps.

Lets have a look at a simple example which uses getServerSideProps to fetch data at request time and pre-renders it.

function Page({ 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 } }

}



export default Page

The above example is from NextJs documentation. Here, I have not mention about the “context” object which is used as a parameter in getServerSideProps, trying to keep the article short, simple and beginner friendly. If you are interested on learning it, then have look at this link.

One thing we must know is, getServerSideProps only runs on server-side and never runs on browser.

Conclusion:

That’s all about the server-side rendering on Next.js. This topic quite new for me as well and this article is just a summary of my research. I have tried my best to keep things simple and make it more beginner friendly. Hope you guys liked it. Thank You!!! 😇

Keep Learning!! 🙂