Client-side Rendering vs. Server-side Rendering

Using client-side or server-side rendering depends on an application’s type. We'll learn all about both in this lesson.

Client-side rendering

A website that uses client-side rendering will have the server send a mostly empty HTML file to begin with. It will have links to CSS in the <head>. It will also have links to JavaScript in the <script> just before the closing </body> tag. The <body> will otherwise be empty. This is to stop JavaScript loading from blocking content loading. So, the content is loaded and the scripts are loaded next.

An alternative to this is to use async in the script tag, like so:

<script src=”main.js” async></script> 

The async attribute tells the browser to load the file asynchronously. This means it is loaded as a background task, so it will not block the main thread and hence will not block the content from loading.

While we’re on the topic, it’s recommended to put links to CSS style sheets in <head></head>, too. This is so that the browser styles the HTML as it loads. If style sheets are put at the bottom of the HTML, the browser will have to restyle and render the whole page from the top, which can cause a performance bottleneck.

However, unless the script is needed before the content for some reason, it’s best to keep it at the end of the body. Here’s how client-side rendering works:

Level up your interview prep. Join Educative to access 70+ hands-on prep courses.