If you are a React JS developer, you should learn Next JS. It is a React framework that offers a lot of features to improve the User Experience of your website. It was developed by Vercel and is currently in its 13th version. This blog helps you get started with Next JS and two important concepts - Server Side Rendering and Hydration.
Features of Next JS
Server-Side Rendered Pages: It is a feature that Next JS offers that can help render pages faster. A chunk of the HTML content is rendered in the server before it is sent to the browser.
File-based Routing: No additional library is required in NextJS for moving from one page to another. Routing is based on the files that are present in the project and can be accessed using mainURL/filename.
Better SEO: Due to faster loading, the SEO rankings of the page are improved. It also improves Content indexing.
Image Optimization: There is a separate component in NextJS that is used for the optimization of images and resizing the image according to the size of the device.
What is Server Side Rendering (SSR)?
It is the process of rendering a webpage on the server even before it renders on the client. Imagine rendering as making a pizza. The server is a pizza expert who knows how to make the pizza very well. The client (the computer on which the webpage is displayed) does not know how to make pizza, hence, is given the manual to make a pizza. It would be better if an expert could make the pizza rather than the customer making it himself to get a better pizza.
Generally, there are two sets of Javascript required to build/render a page using frameworks like React.js. One is on the server side where the javascript is used to render the initial HTML of the page. The second one is the client-side javascript which is used to handle user interactions and manage the user interface.
In client-side rendering, the user receives the HTML first, loads it on the client, downloads some javascript code to render the page, then fetches data through a request and then the entire page is rendered. This takes a lot of time and multiple requests are involved.
In Server-side rendering, the JavaScript code for rendering the page runs on the server itself and sends the HTML to the client system with all the required data. Subsequently, the JavaScript code on the browser is loaded only for managing UI. The HTML code is rendered faster as it is pre-loaded on the server.
Why Server-Side Rendering is preferred?
The HTML of the webpage is loaded on the server and sent to the client. If you look at Server side rendered pages(vercel.com for example), some content is shown even when you disable Javascript on your browser. When you open a web page, it is better to see some content loaded on the page rather than seeing a blank screen. So even before the full page is loaded, some part of the page gets loaded. This is why Server side rendering is preferred. It also helps in improving SEO.
What is Hydration?
While reading about Server side rendering, you might have heard of Hydration which is basically the toppings you add to your pizza. When you use Server Side Rendering, the bare HTML is sent to the client and you can imagine it to be a pizza with just cheese. All of the content there is static. After hydration is complete,(toppings are added) interactivity is added to the website - event listeners, state initialisation etc are made. This helps in making the site more interactive.
Conclusion
Hope this blog helped you learn the basics of Next JS and Server Side Rendering. If you have any feedback, let me know in the comments.
Thanks for reading!