Learn how easy it is to do Server Side Rendering with React and NextJS
Server Side rendering has been the popular way of rendering web applications before the advent of JavaScript frontend libraries/frameworks e.g React, Angular, Svelte, and Vue.js which brought Client-side rendering to the mainstream. In this article, we will be looking at how to build an SSR application using React but first let’s take a detour to explain what Client-side Rendering and Server-side rendering are.
Client-side rendering is a way of rendering the content of a web application on the client-side(browser). What it means is when a user makes the initial request the server will return a blank page or a loading screen with some scripts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Client side rendered SPA </title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="app.js"></script>
<script src="react-library.js"></script>
</body>
</html>
The page renders and delivers content to the user after the scripts are fully loaded and compiled. This might lead to a slow initial render time but the upside is that when another request to the server is made, only the content will need to travel from server to client. The script will be responsible for rendering the response. This in turn makes all the subsequent requests after the first one super fast. The major downside of this approach is the script tends to grow as the application grows which can make it less performant as it scales.
SSR is a way of rendering web applications on the server and then sending the response and content back to the user. What this means is when a user opens a web application a request is sent to the server which returns a response together with the content i.e HTML, CSS, JavaScript, and other assets required to display the page to a user.
So unlike a Client-side rendered application, a page with the content is returned to the user. The downside of this approach is a request is always made to the server whenever a user clicks a link which may be slow as the server has to go through the process of processing the request and then return the HTML, CSS, and JavaScript files.
A solution to this approach is a hybrid of SSR and CSR which is called a Universal or Isomorphic app in some circles. In an Isomorphic app, we can eliminate the slow initial load time by Client-side rendered applications by rendering the initial HTML from the server and then letting the client take over rendering responsibilities thereby eliminating the frequent requests that have to be made to the server in SSR apps.
Benefits of SSR
Cons of SSR
#react #javascript #web-development #nextjs