Difference Between Server Side Rendering and Static Side Generation in NEXTJS
NextJS is a framework developed by vercel from react that offers numerous advantages. Some of these advantages are:
- It’s more easier to code, for example its ability to handle routes unlike react where we need a library(react-router-dom)
- It’s is faster
- Better Search Engine optimisation (SEO)
- Fast rendering through pre rendering.
Our focus on today will lie mostly on its slick rendering. Rendering is the ability for changes on a page to be reflected quickly upon refreshing of the page.
NextJS provides a new type of rendering in addition from the client side rendering that already existed in react entitled pre rendering.
With pre rendering, all the pages are pre-rendered by default and NextJS will generate HTML for each page in advance rather than relying on client-side JavaScript to do it all as in react.
In summary, with pre-rendering:
Without pre-rendering
But now, pre-rendering can be divided into 3 distinct types but we’ll consider only 2;
- Server side rendering and
- Static side generation.
Server side rendering
Server side rendering renders the web page on the server rather than on the browser. It generates an HTML page for each request. This makes it slower as compared to static side generation but nevertheless, it’s appropriate for dynamic content that changes frequently. We’ll dive more into this on it’s application
Static Site Generation
Static side generation is a method that generates the HTML at build time. If we have a web page that doesn’t requires external data from an API, NextJS will pre-render its content by default but in the case our page needs external data, NextJS will download the content in advance and generate the HTML at build time. The pre-generated content is stored in CDN as a cache, so when it is needed, the cached version is sent and thereby increasing performance.
To have a better understanding of these 2 rendering methods, we’ll contextualise an app with two pages.
Application of Static Site Generation
Our app will have a home page where it fetches data from an external api to display many countries as show below:
It’s obvious there’ll be no need of re-fetching data from our api since our page remains the same so the best solution is to use static site generation which is implemented as follows:
Above our home page, we’ll use the getStaticProps() method which is a default NextJs function where we’ll fetch the data from the Api(to get the list of countries) and return it as a prop to later pass it down to our home page as “countries”.
Application of Server Side Rendering
Now that we’re done with our first page, let’s say we have a second page we consider as country page where the user is directed when he clicks on any of the countries present on our home page. This page will display detailed information about a country. Unlike our home page, this page renders content dynamically according to a particular country code in our URL. The best choice is logically server side rendering since it renders an HTML page on each request. Server side rendering is implemented on NextJS as follows:
Server side rendering uses a different function by NextJS called getServerSideProps() which takes a parameter. This parameter is generally dependent to the path parameter present in the url to send a request to the server. It is accessed as:
const code = params.codeThe getServerSideProps() method returns a prop (country) which is later on passed to our country page as a prop.
That said, I hope you found this post useful and looking further to implementing these in your upcoming NextJS projects. You may leave a clap if you enjoyed, thank you for reading.
Stay hard!
