Client Side Rendering Vs Server Side Rendering in React js & Next js

Hi Guys in this article I want to share with you my experience of starting working with Next.js .We will discuss about the benefits of using Next.js and comparing server side rendering with client side rendering in React js and role of Next.js in making a server side rendering react application . We should have a basic understanding of the several things for this discussion:

  1. What is Client Side Rendering ?
  2. What is Server Side Rendering ?
  3. Server Side Rendering Vs Client Side Rendering ?
  4. Benefits of using Next.js
  5. Small implementation of Building Application using Next.js

Before discussing our discussion I am sharing some reference of Next.js:

  1. Next.js Documentation: https://nextjs.org/docs

2. Next.js Crash Course: https://www.youtube.com/watch?v=IkOVe40Sy0U

Before going through the documentation you can go through the video it’s really nice and the documentation is also descriptive and self explanatory.So let’s begin our discussion..

  1. What is Client Side Rendering ?
Client Side Rendering

Client-side rendering is a reasonably new approach to rendering websites, and it didn’t really become popular until JavaScript libraries started incorporating it.

When we talk about client-side rendering, it’s about rendering content in the browser using JavaScript. So instead of getting all the content from the HTML document itself, a bare-bones HTML document with a JavaScript file in initial loading itself is received, which renders the rest of the site using the browser.

With client-side rendering, the initial page load is naturally a bit slow. However, after that, every subsequent page load is very fast. In this approach, communication with server happens only for getting the run-time data. Moreover, there is no need to reload the entire UI after every call to the server. The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

2. What is Server Side Rendering ?

Server Side Rendering

In server-side rendering when a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. The browser then constructs the content and displays the page. This entire process of fetching data from the database, creating an HTML page and sending it to client happens in mere milliseconds.

3. Server Side Rendering Vs Client Side Rendering

The main difference is that for SSR your service response to the browser is the HTML of your page that is ready to be rendered,while for CSR the browser gets a pretty empty documents which links to your javaScript. That means your browser will start rendering the HTML from your server without having to wait for all the javaScript to be downloaded and executed ,In both cases , React will need to be downloads and go through the same process of building a virtual DOM and attaching events to make the page interactive but for SSR,the user can start viewing the page while all of that is happening .For the CSR world you need to want for all of the above to happen and then the virtual DOM moved to the browser DOM for the page to be view able.

Pros of Server Side Rendering :

  1. Search engines can crawl the site for better SEO.
  2. The initial page load is faster.
  3. Great for static sites.

Cons of Server Side Rendering:

  1. Frequent server requests.
  2. An overall slow page rendering.
  3. Full page reloads.
  4. Non-rich site interactions

Pros of Client Side Rendering:

  1. Rich site interactions
  2. Fast website rendering after the initial load.
  3. Great for web applications.
  4. Robust selection of JavaScript libraries.

Cons of Client Side Rendering:

  1. Low SEO if not implemented correctly.
  2. Initial load might require more time.
  3. In most cases, requires an external library.

4. Benefits of using Next.js:

Next.js is used for server side rendering of react application .React along with other framework like angular and vue.js are traditional client side framework ,they run in browser but there are technology to run this framework on server side, and next.js is a solution for running react application server side.It also makes react development very simple.Some core features of Next.js are:

  1. Server rendering React Apps.
  2. Automatic code splitting and lazy loading.
  3. Built in CSS support.
  4. Hot Reloading support.

Going to production with react is really complex actually .Next.js is a framework for React that scales with your project. You start off with a static website , and as project goes page got added. All these pages may have different requirement in that case Next.js is really useful.For create React Application the size of the largest initial JavaScript is important during the first loading for both the display of all content and for the application becoming interactive.

For Next.js ,during the first load ,the size of largest initial JavaScript bundle is only important for the application becoming interactive, the display of all content is mostly unaffected by it.

It’s important for create-react-app and Next.js that the largest initial JavaScript bundle to be minimized .In both cases this is easy to accomplish using bundle splitting , In the case of Next.js ,however ,bundle -splitting happen automatically in common situations. We actually are using server side rendering for two reasons .

  1. Performance benefit of our customer.
  2. Consistent SEO Performance.

So you may think what is SEO , it stands for Search Engine Optimization which is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. SEO refers to the improvement of unpaid results (known as “natural” or “organic” results) and excludes direct traffic/visitors and the purchase of paid placement. SEO may target different kinds of searches, including image search, video search, academic search news search, and industry-specific vertical search engines.You can refer to this link to know more about SEO:

https://searchengineland.com/guide/what-is-seo

5. Small implementation of Building Application using Next.js:

So it’s start coding ,to start with Next.js ,First we have to do basic setup .We have to create folder then open the terminal and run npm init -y ,then we have to install some npm packages like next ,react,react-dom and isomorphic-unfetch by running this command on terminal: npm install next react react-dom isomorphic-unfetch

Let’s see the file folder of our code:

File folder of our Code

In our code base, there is a package.json file having the basic setup. The pages folder contains all the page route means the file inside pages/index will render on our base route localhost:3000/ and the file inside pages/about will render on route localhost:3000/about. The components folder contains all the component which will be render inside page route. Next.js comes with it’s own code splitting technology.Let’s see the package.json file:

package.json

In package.json , dependencies is having all the npm package and scripts are all the scripts which are used to run our application.Now let’s see the Layout.js inside components folder:

Layout.js

In Layout.js we have imported Head from ‘next/head’ . We have imported Navbar from ‘./Navbar’ .We have created a layout which is common in all the pages of our application .Inside Head we have added the cdn of Bootstrap , we have added meta tag for content type ,description and viewpoint these are required to make your increase accessibility and SEO of your application.Then we have placed our Navbar, after that inside the div with className= “container” we have placed the children means ,the Layout component will work as the wrapper of our application.Now let’s see the Navbar.js file:

Navbar.js

In Navbar.js we have defined the Navbar of our application we have imported Link from ‘next/link’ .This Link tag is used in Next js to handle the transition between different pages of our application .So inside li tag we have placed Link tag and connect Home button with index.js or base route and About button with about.js or ‘/about’ route.We used bootstrap classes to style the Navbar component. We have added lang in our html tag this is required to increase the accessibility of our application .Now let’s see the index.js file:

Index.js

In Index.js file ,we have import fetch from ‘isomorphic-unfetch’ for performing fetch operation.We have imported common wrapper Layout and we also imported Price item which displays the current Bitcoins rate.So Next comes with a function called getIntialProps which is a asynchronous function which fetches the data and return an object as a props to the component.So what we are doing we are defining the asynchronous function which is fetching data from the api and while we get response we are storing it inside the data then that function is returning the object having bpi as the argument which is carrying the bpi data. This object can be accessed by the component Index as props so inside Index component we are accessing the props and sending the bpi data to price component to make them rendered.Now let’s see the Price component:

Prices.js

In Prices.js, we have created a state called currency,which stores the currency in which we want to see the Bitcoin value .After that we are rendering the details using the value of the currency from state, we have also used select tag to select the currency value of the Bitcoins.Now let’s see the about page :

about.js

About.js is self explanatory it’s just rendering a header and paragraph.Now let’s see the _document.jsx file:

_document.jsx

Actually this file is not required for this application, if you have gone through the documentation you will see there is a advanced section which is having this file _document.jsx, this file is mainly used to increase the Search Engine Optimization and Accessibility of the Application.

So Our Application is up and running Now we will run npm run dev to see our application:

Home Page
About Page

If you have seen the video link I have mentioned above .It’s the same code .I have added the head tag in Layout Page having all the meta tags and language to the html DOM. Now let’s run an audit test to test the SEO and Accessibility of our application .To run an audit test we have to open google developer tools and we have to go to audits tab after that check the SEO & Accessibility option and select Desktop option and then click on Generate Report Button. And let’s see the report:

Before Modifying the Code
After Modifying the Code

Thus we can see using Node-js we have rendered the react app on server side ,which made our application to have a audit report of 100% accessibility and 100% SEO .I am attaching my GitHub link for the code base of this tutorial Github Link:

So there are many cool stuffs you can do using Nextjs, you can check the documentation and can utilize all the features that comes build-in with Next js , till then don’t stop exploring new things because exploration makes a person better in all aspects of life.

HAPPY CODING…..:)

--

--

--

Web developer by profession,Photographer,Blog Writer,Singer,Pianist,Seeker of Solution

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

This.JavaScript: State of Frameworks- Polymer/Web Components Update

Jetpack Compose Theming for Existing Apps (Part 2) Creating a Custom Theme

How to integrate React Native into your apps

Automated testing for your Alexa Skill using Bespoken Virtual Alexa and Mocha

Everything you need to know about React

How to Solve Common JavaScript Coding Challenges

Building an App From the Ground Up In Public — PomoCat Pt. 1

The Difference Between JavaScript Null and Undefined Data Types

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yudhajit Adhikary

Yudhajit Adhikary

Web developer by profession,Photographer,Blog Writer,Singer,Pianist,Seeker of Solution

More from Medium

React App | Next js Server side rendering Framework

Build a React app with webpack (Without Create React App)

Catch TypeScript Errors in Next.js Before Building Your App

The Beginner’s Guide to React Redux