How old is client-side rendering?

twitter logo github logo ・1 min read

I recently finished my react personal website. It's built using react and It's being client-side rendered.

"SSR vs CSR" is kind of a new topic for me and I am currently (we can say) researching it.

There are tons of content on the subject out there. I have been reading those. But I didn't manage to find the answer to this question.

  • When was CSR first introduced?
  • Which framework supported CSR first?

I am also wondering if CSR was out there before ReactJS.

Can someone help answer those questions?

twitter logo DISCUSS (9)
markdown guide
 

I think the first popular one was Backbone.js, many years before React was even a thing inside Facebook or Angular.js (v1) inside Google.

However I think the first webapp using a lot of CSR was Gmail even more year before Backbone.

 

"Client side rendering" was always technically possible, there's nothing special going on you couldn't always do as long as JavaScript and the DOM existed. But I would say it was React that made it mainstream. I wasn't a big user of the "JavaScript frameworks" before React, but I believe Angular 1 generally attached itself to HTML elements you typically rendered on the server.

There were templating libraries which probably helped some people do client side rendering, but React really made it popular by popularizing the idea of writing HTML directly into JavaScript using JSX.

That's my interpretation of the history at least. I believe that is when folks started sending the data as json either as HTML data attributes or as an async call in componentDidMount etc.

Happy coding, I'm not totally confident in my answer but it's probably close.

 

Ohh, I could be confused here 😕. I haven't looked at CSR like that before. So you mean the following scenario :

  1. Some HTML & JS initially load without content.
  2. JS does subsequent call to grab the content as JSON.

That's considered CSR? If that's the case. We can totally say that CSR is way older than React.

I was just thinking about Client-side routing and how ReactJS depends on the client (not the server) to grab content based on route.

 

client-side routing is another topic, and for the client-side rendering as @ben mentioned above it was there before react, but react comes with something called virtual dom which is a way to store the dom on memory and render it into the page using the react render function.

 

My thought on this is to boil down the notion of "client-side rendering" to its most basic primitive: the ability to manipulate DOM.

In its earliest form, that has existed from the dawn of DHTML, which dates back to IE4 release in 1997.

Everything that has happened in this space has been a gradual evolution since then: be it more powerful DOM manipulation APIs, coupled added capabilities like AJAX (~1999) which allowed you not to force full page loads to show new data fetched from server, is what really started to move things towards meaningfully CSR in the early days.

With the advent of Web 2.0 (websites become more like "applications" that power user-generated content), people realised the need (and the amazing possibility!) of building more complex and full-fledged web applications.

Awesome wrapper libraries of the day, like jQuery (2006) really started to make doing all these things very easy.

We became more ambitious on how complex web applications can be built... state management on the client became an important and common deal, with more and more websites veering into the territories of "applications" rather than "documents".

Meanwhile, browsers and devices continued to become more and more powerful (and efficient!) in doing what they do. Client-side application architectures became more and more complex. New rendering paradigms evolved into what we see as Angular, React et al these days.

It has been an interesting journey over time!

 

Yeah for sure. I always like hearing about web history

 

Potentially, as old as the history API is in browsers?

 

I was using sort of CSR in my projects a lot earlier than React was even existed. I was using jQuery to make all sorts of elements on the screen.

$('<div>',{class:'element',html:'I\'m CSR element'}).appendTo('body');

exists for a very long time :)

I'm now more of a VueJS team now.

Also when history was introduced, a lot of SPAs came to life.

 

Yeah i think i was confused between client side rendering and client side routing

Classic DEV Post from Aug 27

How do *you* pronounce sudo?

Bassem Mohamed👨‍💻🇪🇬 profile image
Well, let's see. Egyptian, Developer, Blogger, Hiker and a Minimalist in the making.

Don't miss out on the next important post

Sign up (it's free!)