My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Server-side Rendering with Next.js

Aastha Gupta's photo
Aastha Gupta
·Apr 26, 2021·

3 min read

React is a powerful JavaScript library for making User Interfaces more modular and easier to maintain. In this article I will share how react reduces the performance of the application and the benefits of using Next JS for server side rendering.

image.png

React creates JS bundles that contain all the HTML/CSS that is visible on the page. So when we open a react application it first loads all the JS bundles on the client side and then the application is rendered. This causes a delay in the initial loading of the page.

This approach reduces the application performance as it is loading the complete application beforehand. Suppose there is a page that has a lot of images or heavy content but the user is not visiting that page but still that is being loaded initially. This results in poor user experience and hence the application performance is reduced.

Next JS is becoming more and more popular recently. Next is a React front end development web framework created by Vercel (formely Zeit) that enables functionalities such as Server side rendering and static site generator. The main reason behind the popularity of Next JS is that it renders the HTML page in advance, instead of doing it on the client side. This results in better performance and SEO.

What is Server Side Rendering

Server Side rendering is a technique that is used to reduce the load time of the application and improve the performance. This is achieved by loading the HTML pages on request from the client side, unlike a traditional React app where the entire application is loaded and is rendered on the client, Next.js allows the first page load to be rendered by the server, which is great for SEO and performance.

Other benefits of Next JS

  • Image Optimization: Next has an Image component that automatically resizes, optimizes and serves images in formats like WebP when the browser supports it.
  • Fast Refresh: This creates a better developer experience, every time you make a change in your project, you'll see the edit live without having to refresh the page, and, most importantly, without losing the state.
  • Easy Page Routing: In React, you need to install a package like react-router for your routes, in Next, you only need to create your js file inside your pages folder.
  • API Routes : You can build your own API with Next.js. This is server less so it comes with some downsides, but for most projects, it's perfect.

  • Easy Authentication: With Next, it's really easy to add authentication with a library they have created.

  • Easy Deployment: You can easily deploy the Next application to Vercel ( creator of Next JS ) and Netlify.

Thanks for reading!