It’s official. Everybody is talking about React but even after making a real effort and consulting reference materials, it’s difficult to understand this technology’s impact on SEO. Allow me to shed a little light on the subject.
With the rise of SPA, “real time” web applications such as Gmail, Airbnb, Soundcloud or even Netflix, frameworks and JS libraries have never been so popular.
Hard not to see technologies such as AngularJS (the Google framework), Backbone.js, Ember.js or KnockoutJS.
The main issue with these frameworks is that content is inserted on the client side after loading the page from the server side (the opposite, for example, of PHP): if you look at the source code, there’s a void.
Under these circumstances, Googlebot cannot crawl and index the content inserted after the fact: catastrophic from an SEO point of view! (or so it’s said…)
On the developer side, there have been numerous development initiatives for crawling and indexing content generated in this manner but they remain costly or at a minimum, restrictive in a project’s life cycle.
That’s where React, aka THE solution, comes in! Still with me?
React is a library (a collection of methods and functions) that allow the development of interfaces that have the particularity of constantly changing: one can imagine a “real time” comments module or the Facebook Ticker (that summarizes your friends’ actions, here again in quasi “real time”).
React’s strength is to always find the best way of updating and rendering these changes [rapidly], without having the user reload the page.
This library’s development as well as its publication is the result of collaboration by a good hundred developers working in different companies including, initially, Facebook and Instagram: so pretty serious stuff!
“React is so fast because it never talks to the DOM directly.”
You need only remember that the code between the client (your browser) and the server is the same! In other words, “The backend and frontend share the same code.” (as diagrammed below on the right)
Besides, React is not the only library to bring this technology “on board”. To date, we have already identified a good twenty such as Brisket, Cassis, Catberry, Chaplin, Derby, Ezel, Este, Flatiron, Fluxible, Invisible, jsblocks, Loopback, Lazojs, Loopback, Mojito, Sara.js, San Stack and Taunus.
“… this is purely anecdotal evidence, but when we use the word universal instead of isomorphic everyone gets it.”
Don’t waste time comparing them, React, as opposed to AngularJS, is not a framework.
But if you’re obsessed by the difference between frameworks and libraries, don’t hesitate to take a look at the conversations. For you others, just remember that React does not impose a specific architecture on your application and so can be appended to any project using other web technologies (including AngularJS) in a completely autonomous manner.
“React is just the VIEW”
You pay, or you do-it-yourself!
If you don’t have the means, you will present an alternative HTML version (a snapshot) of the pages to the exploration bots by using a Phantom.js (you can take a look at the tutorial; it’s a bit dated but the idea is there). Yes, cloaking! Purists will say that’s “dirty” and difficult to maintain but it works and rather well.
That’s it?! Yes, as far as SEO is concerned. It all depends on what you will then do with implementation on the back-office side. And to complete this theme’s analysis, I recommend that you take a look at the following article by Zack Argyle, a developer @Pinterest: “Stop Using React for EVERYTHING”.
“If you have a highly dynamic application that needs to rerender frequently, and you want to avoid the heavy weight of template diffing, you’re looking at a grass-type opponent and ReactJS’s virtual DOM will be super effective. However, if your site doesn’t have those needs, CHOOSE SOMETHING ELSE!”
Simply put, none. But with a little digging, we found:
More and more companies! To talk about the best known, of course we’ll cite Facebook, Instagram but also Yahoo, Adobe, Airbnb, AdRoll, Asana, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Khan Academy, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp and many others.
Did you enjoy reading this article? Please share or tell us about your experience (good or bad) with frameworks and JS libraries by leaving a comment.
And if you want more, I recommend reading our previous article Demandware: SEO advantages and inconveniences.