Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation
By: Malcolm Laing
Tags: Reactjs, JavaScript, Programming, Nextjs, React

Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation

Which to use when, and why

Photo by Alesia Kazantceva on Unsplash

Frontend developers often use these terms to describe their web applications. However, to developers less familiar with web applications, these terms are often confused. If you are confused about the differences between Client-Side Rendering, Server-Side Rendering, and Static-Site Generation, then this article is for you!

Client-Side Rendering

Client-side rendering was made popular with the advent of the Single Page Application (or SPA). JavaScript Frameworks like AngularJS, ReactJS, BackBone.JS and many more use this approach. With Client-Side-Rendered Applications, the server sends static HTML and JavaScript files to the client. Then the client makes any API calls necessary to get initial data, and then it renders the application.

The static HTML sent by the server.

As we can see in the above gist, the static HTML sent by the server is an empty page. If you opened this HTML without JavaScript, it would be a blank screen with a noscript warning. When the client receives the HTML and loads the JavaScript, it will render the react application into the div with the id root.

Advantages of client-side rendering

1. They are cheap and easy to host

For client-side rendered applications, you don’t need a web server. You can simply host your application on any CDN or static file host like Amazon S3. There are lots of ways to host your client-side rendered application for free.

2. No full page reload required

Users can navigate between your pages without having to make a server roundtrip. This makes your website feel fast, almost like a native application.

Disadvantages of client-side rendering

1. They have poor SEO

Client-side rendered applications often struggle with SEO. While Google claims they will crawl JavaScript rendered websites, they tend to rank poorly. If your website takes too long to load, it can end up being indexed as an empty page.

2. Poor user experience on slower devices

Leaving rendering to the client-side can add seconds of load time on slower laptops and mobile devices. This can lead to users getting frustrated and leaving your website before it finishes loading.

3. They load slower

A client-side rendered application needs to make an additional round-trip to your API server to render. This means your website will always load slower than an equivalent server-side rendered or static application.

Server-Side Rendering

Server-side rendered applications return the full HTML page of your application ready to be rendered. They make any necessary API calls beforehand and pass all the necessary data in the initial request. This means your web browser has everything it needs to render the application right away and has a faster first interaction time for your users.

Server-side rendering is the traditional method for creating websites. The traditional disadvantage of server-side rendering was having to make server roundtrips as you navigate around the site. However, with tools like NextJS, we can create applications that offer the best of both worlds. By offering the first load with Server-Side rendering, and client-side routing afterwards.

Advantages of Server-Side Rendering

1. They load faster

Server-side rendered applications load faster than equivalent client-side rendered applications. And since the server takes care of the heavy lifting, they also load quickly on less performant devices.

2. They have good SEO

The SEO benefits of server-side rendering are well documented. Google rewards websites that load faster with higher page rankings. Google and other search engine crawlers will have no problems indexing your server-side rendered websites.

Disadvantages of Server-Side Rendering

1. They are expensive to host

Compared to client-side rendered applications, server-side rendered applications are expensive to host. For every request to your server, your server will need to make API calls, and then render your HTML before passing it to the client.

2. They are more complicated to develop

Setting up server-side rendering on your own with React can be a daunting task. However, this is made much easier by working with an established framework like NextJS.

Static-Site Generation

Static site generators work by generating all of your websites HTML files at build time. The server makes your API calls and generates static HTML files for every and every page of your website. This means that when a client requests one of your webpages, the server doesn’t need to make any API calls, or render any HTML, it only needs to return the pre-rendered HTML file.

Let’s say you are building a blog, and you have written ten blog posts. When your static site builds, it will generate one HTML file for each of your blog posts. When you write another post, you need to rebuild your application and deploy the updated static assets.

Gatsby and NextJS are popular ways to make static sites with React. Hugo is another example of a hugely popular static site generator.

Advantages of Static-Site Generation

1. They load fast

Since the HTML is already compiled and ready to go, static site’s load faster than both client-side rendered sites, and server-side rendered sites. You can

2. They are cheap to host

Since your website is just made up of a bunch of different HTML files, you can host your site on any static file hosting service like S3, or use a CDN.

Disadvantages of Static-Site Generation

1. They don’t scale that well

As your site grows, so will the build time of your static site. This can cause builds of websites with large amounts of posts to slow down to a crawl. Static sites work best for sites with data that doesn’t change that often, like blogs, and not so well for sites with ever-changing data, like shops.

The best of both worlds — NextJS

In my opinion, NextJS offers the best of both worlds, by allowing us to build hybrid applications that leverage both server-side rendering and static site generation. NextJS offers what it calls automatic static optimization on pages that it determines to be static. This allows you to create hybrid applications that contain both server-rendered, and statically generated pages.

This feature allows Next.js to emit hybrid applications that contain both server-rendered and statically generated pages.