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.
What is Client-Side Rendering?
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.
What is Server-Side Rendering?
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
- Faster initial load time: because an SSR app only delivers what a user requests for when an initial request is made and also doesn’t have to wait until all the JavaScript files are loaded the Time To First Byte (which is the response time from when a user clicks a link to getting feedback) is faster.
- Good for SEO: SSR apps are better suited for Search engines(Google, Bing, etc.) as the bots of the Search engines can crawl the entire app and index its pages, as opposed to Client-side rendered apps that load and updates just a single page.
- Great for static sites: because the server returns a full HTML to the user, SSR can be great for building static sites.
Cons of SSR
- Frequent server requests: every request made by a user has to be sent back to the server for processing which leads to performance issues.
- Overall slower load time: because the server has to process each request the load time overall becomes slower compared to single-page applications that only need to fetch all the content needed at the initial load time. Also for large SSR applications, processing requests can take some time which may lead to a slow Time To First Byte.
#react #javascript #web-development #nextjs
