How old is client-side rendering?

"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.

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.

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!

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.