Introduction

In web apps today, it turns out there are many approaches to delivering (dynamic) HTML to the web browser. Maybe you have come across terms such as 'Server-side Rendering', 'Client-side Rendering' or 'Isomorphic Javascript' what does it all mean? What is the benefit of choosing one over the other? In this series, I shall attempt to explain and categorize them.

First, What do we mean by 'Rendering'🤔

The web pages of a dynamic website are automatically constructed based on data in a database rather than being manually written by a developer. This allows the content of the webpage to vary by updating the database instead of rewriting HTML and deploying a new version.

Image Credit: learnwebskill

Rendering in the context of this series refers to how/when/where template (a preliminary version of markup) and data are combined to create the final markup content of a site.

Image Credit: slideshare

Quick Rant 💬

In my opinion, it should be called 'Templating' instead of 'Rendering' because that's what it is. Especially when you consider the browser is actually rendering HTML (calculating and painting pixels) not matter the approach but hey I don't get to decide these things...

Types of Rendering

In this series, I shall organize the various rendering approaches under two broad categories:

• Server-Side Rendering
• Client-Side Rendering

As the name might imply; the main difference of client/server indicates where the templating/rendering/interpolation takes place. Either on the client or on the server.

In the next post, we shall look at Server-Sider rending approaches.