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.
What is React? What’s it used for? Why is it a good thing?
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…)
“It’s hard to do that at the scale of the current web, but we decided that it’s worth it.”
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.”
Understandability: the product code is “clean” (easy to ready, easy to understand and easy to maintain), reading the code means immediately seeing what the application will be used for and what it will look like.
Performance: the Virtual DOM is one of React’s key functions. React endeavors to process and display the view’s changes only (by setting aside the rest of the view, which doesn’t change).
[HOT SEO] Isomorphism and server-side rendering: through the use of a Node server, code can be generated on the client side AND the server side (so kinda like PHP but without reloading!) as compared to other traditional JS libraries and frameworks (Backbone.js, AngularJS, Ember.js, etc.) which execute native code only on the client side (in the browser). This strength is the one that is most interesting from an SEO perspective as it solves the issue of indexing context (ability to be crawled and indexed) created on the client side.
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.”
ReactJS ≠ AngularJS
“Lots of people use React as the V in MVC.”
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”
How do we do this?
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.
Advantages of ReactJS for SEO
The ability of robots to natively crawl and index content: all the advantages of JS without the inconveniences!
Favorable loading times create good user experience. Happy users = Happy Google.
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:
Reference materials are increasing but in the not too distant past, it was not easy to muddle through with only Facebook’s Get started.
Facebook reserves the right to withdraw the license, the right to use React. This is a topic for debate although quite innocently one can ask what possible interest Facebook would have to adopt this type of attitude.
Who uses React?
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.
AND THAT’S NOT ALL…
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.
PS: Thanks to Anne, Georges, Jérémy, Blandine, François and Audrey for the proofing!
Sources & inspirations
React vs AngularJS – How the two Compare [EN]
Facebook ReactJS – Ressources pour bien commencer [FR]
Awesome React, a collection of awesome React tools, resources, videos and shiny things [EN]
React Native, a framework for building native apps using React [EN]
Reusable Components [EN]
Add-ons React, some useful utilities for building React apps [EN]
Flux, the application architecture for building client-side web applications [EN]