All about Server Side Rendering and NextJS

Atrijo Gangopadhyay
Feb 12 · 4 min read

Have you ever wondered why a React app takes so long to load for the first time? It is mainly because the React app is rendered through the browser.

Server Side Rendering(SSR) is the ability of an application to contribute by displaying the webpage on the server instead of the browser. Server-side sends a fully rendered page to the client’s JavaScript bundle takes over and allows SPAs(Single Page Applications) bundles to operate.

What is NextJS?

NextJS is a React frontend Web Developement framework created by Vercel(former Zeit) that enables functionality such as Server side rendering and static site generation. Next is not itself comparable to a Frontend framework like React, Vue or angular but built on top of React to provide extra features helpful especially in production. Unlike a traditional React app where the entire site is rendered in the client side, NextJS allows the first page load to be rendered by the server which is great for Search Engine Optimization and performance. This allows a more interactive kind of interface when compared to an older PhP or something like a Template engine. In those cases, everytime a user wants to navigate to a new route or update something in the user interface, the user has to make a new request and reload the page. Even though an application made with a Client side framework(React for example) solves this problem, they can have many problems and one of them is SEOs.

There can be multiple ways to solve this problem but NextJS does it out of the box as the first page load is done on the server side rather than the client side. Not only does this increase the performance but the content is delivered directly. So if we check the source code, we can directly see the content. So we get the best of the both worlds. We get the great server side SEO optimization and on the other hand we get the quick dynamic client side routing.

Other advantages of NextJS:

  • Easy page routing.
  • API routes.
  • Out of the box Typescript and Sass
  • Static site generation(next export)
  • Easy deployement

For routing, we dont need to use a third party routing like react-router-dom. In the folder structure, there is a pages folder inside which each component is a react component. Suppose a component is created in that pages file named hello.js, on hitting ‘/hello’, we will be able to access that particular component inside the browser. Since it is rendered on the server side, we can also create api routes. We could also work with dynamic routes. Also, there is a package known as next/router which is really useful in getting the parameters.

This is how the folder structure in a NextJS app looks like.

Another thing to notice are the CSS files. CSS files are a bit differently named in a Next app. The general syntax is “filename.module.css”. Also, we cant directly import the stylesheet like we did in react.

This is how we import and use the CSS inside a NextJS app.

Creating a NextJS app:

The command to create a NextJS app is very similar to a react js app. In the command prompt in a particular location, we type the command:

npx create-next-app my-app

Head:

This particular import statement is used if we want to have a custom meta tag, header, descriptions etc. We put the head, meta tags etc inside a parent div, much like how JSX works in ReactJS.

Data fetching and useswr

One common point where all Frontend developers meet would be data fetching and working with number of APIs. In React, we generally deal with such asynchronous requests inside the lifecycle methods. There is a third party library created by Vercel itself named swr, which handles everything mentioned above under the hood. So we can understand how much code and effort can be saved.

This is how useswr works

Link: https://swr.vercel.app/

This was all about the basics of NextJS. One thing I must mention that we can do almost everything in NextJS that we can do in React including using hooks(useState, useEffect), use third party state management libraries such as Redux or Flux, use the Context-API and much more.

And also, NextJS is not ideal, it also has its own disadvantages. NextJS is not actually a backend, we actually need a proper backend for larger apps. If we are preparing smaller apps, NextJS is powerful but it can also overkill sometimes and in such cases, it is wiser to switch back to ReactJS.

References:

Brad Traversy NextJS crash course on youtube

NextJS documentation: https://nextjs.org/

Student Technical Community — VIT Vellore

Official medium page of STC VIT.

Student Technical Community — VIT Vellore

Student Technical Community is a student community in VIT Vellore aimed at enhancing skills of its members in various domains through quality projects and events tailored for cutting edge skill development. We have a passion for innovation and excellence.

Atrijo Gangopadhyay

Written by

Student Technical Community — VIT Vellore

Student Technical Community is a student community in VIT Vellore aimed at enhancing skills of its members in various domains through quality projects and events tailored for cutting edge skill development. We have a passion for innovation and excellence.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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