Client-Side Rendering vs. Server-Side Rendering

Client-side rendering

First, let’s talk about what happens when you use client-side rendering on your application. When you create React apps using only React or the CLI command create-react-app, you are building an application that has a basic HTML file that calls one or more JavaScript files. That JavaScript creates and loads all of your HTML into the site by injecting it into the document object model dynamically. This all happens on the client side.

Client does the processing

It is important to note that the client CPU does all the processing of the JavaScript when applications are using client-side rendering. Typically, this will not be too intense, and most computers should be able to handle it. The site should load pretty fast. In some cases, like on old or cheap computers with slow processors, you would see that having the client handle the processing is not ideal.

Client makes requests for API data

While your site is being dynamically created by JavaScript, it can also be getting data from databases asynchronously through an API. Usually, your site will load the dynamic HTML, and then you will see it populate with information from the database. It takes longer for a client to make a request and get a response from an API than a server.

Speed

Overall, client-side rendering is fast. There are factors that can affect the speed, such as the speed in which an API will respond to you, how fast your hosting provider sends a response, your internet speed, and your CPU processing power.

Server-side rendering

When applications are using server-side rendering, the client receives a full HTML document. The server will access all the required data and run the JavaScript. It creates the page and sends it in its entirety back to the client.

Server does the initial processing

The server will access APIs, loop through the data, and anything else you want it to do. One benefit you get with this is that servers are extremely fast. It can do this work much faster than a client’s computer. They also have a better connection to the internet, which helps the speed in which APIs can reply much faster.

Additional processing can be done on the server

This is really important as well. What if you get an entire document back from the server but then need your app to make an additional call to an API to get data? You can do this with Next.js. You are not forced to render everything on the server. You will still be able to make asynchronous requests to APIs and update the document without a page refresh.

Speed

Servers can process JavaScript and create documents faster than a client. The main difference is that you will see the browser waiting for a response from the server a little longer with server-side rendering, since all the work is done on the server. Once the response comes, the site loads instantly and all at once. This still takes less time than the often speedier initial response when using client-side rendering. When you handle it this way, things start loading on the page asynchronously and take a second or two to fully complete.

Summary

With either rendering approach, you get a fully rendered HTML document at some point. You’re probably wondering if there are more benefits to server-side rendering not yet mentioned, right?