HTML augmentation with ReactDaniele Esposti's Blog, in 20 March 2015
The example code
Let’s start with the example code taken directly form the react documentation:
this will tender client-side the number of seconds since the load of the page.
Now we prepare a simple static page with the same content as static HTML:
Server-side and client-side render
How this sample page is render by the browser and what the crawler can see?
Let’s start with the content returned by the HTTP request:
Now, if someone was expecting something else please got to review the basics about how the World Wide Web works :-)
So now lets see if or React code can augment this HTML without extra work form us:
Something happened to our HTML: the original content
div element is replaced with a new
div element and a couple of span elements and all of them has a
data-reactid attribute. This attribute is used by react to keep track of the DOM and apply changes as a diff between the internal virtual representation and the current DOM in the browser.
So yes, React can augment a server-side rendered page transparently without the need to drastically modify the page (except to add the HTML load the scripts) or to choose a specific technology on the backend to be compatible with React.