Design a site like this with WordPress.com
Get started

Server-side Rendering with Next.js

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.

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. It is a React Framework for production. 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.

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 in react the complete application is loaded beforehand.

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.
  • 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.

Thanks for reading!

Advertisement

Published by Aastha Gupta

Web Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: