Client-Side Rendering and Server-Side Rendering

Introduction

Basically, when a user opens a website, the browser makes a request to a server to get the content of the website. The content of the website includes; HTML(Hypertext Markup Language), JavaScript, assets, styles and other data. The request of the user(browser) and the response from the server depends on the following:

1. Internet connection speed
2. The distance of the user from the server
3. CDN
4. The amount of user tying to open that site at a time
5. The size of resources(JavaScript, images, styles, etc) to be used on the site

and others...

The response content from the server can be loaded in the browser(Client-Side Rendering) or on the server(Server-Side Rendering).

What is Client-Side Rendering?

This type of rendering involves the browser making a request to the server, the HTML is returned as the response but no content. This makes the user see a blank page until other resources such as JavaScript, styles, etc are fetched. The browser compiles everything then renders the content.

Advantages of Client-Side Rendering?

1. Lower server load since the browser does most of the rendering
2. Quick navigation. The pages on the website don't have to be re-rendered when navigated to

Disadvantages of Client-Side Rendering?

1. Initial load may require more time
2. Most of the times, this approach depends on external libraries/frameworks
3. SEO(Search Engine Optimization) may be low if not implemented correctly

What is Server-Side Rendering?

This was the type of rendering used when the web came about. This involves the browser making a request to the server, the server then generates the HTML as the response with content. Unlike Client-Side Rendering(CSR), the page is visible but not interactive immediately.

Advantages of Server-Side Rendering?

1. SEO friendly
2. The user gets to see the content fast compared to CSR
3. The browser has less load
4. A great option for static sites

Disadvantages of Server-Side Rendering?

1. Server is busier
2. Although pages are viewable, it will not be interactive until the JavaScript is compiled and executed
3. Navigating to pages on the website restarts the rendering process.

Conclusion

Frameworks such as React, Angular, Vue and many other helps developers in achieving both types of rendering. None is better than the other. It all depends on what the developer is trying to achieve and choosing the best option in achieving it.