React is the most popular framework today and simply awesome 🎉. There has never been a time in history of Javascript where a single framework can work across different devices, desktop / mobile as well as work seamlessly across all browsers.
React, just like any other javascript framework, has difficulty getting indexed by Google and thereby get lower page rankings.
Single page applications are hard to get indexed by Google. While they are awesome from an engineering stand-point, search engines rank them lower, mainly because they take too long to load. In a world of instant gratification where 70% of traffic comes from mobile phones over 🐢slow LTE networks, speed matters, a LOT!
React pages are rendered in two formats:
Client side rendering where pages are rendered by the browser.
This is the most common form of rendering pages. While straightforward, the pages just take too long for the browser to render. The problem exacerbates when users are on mobile phones, thereby leading to high bounce rates.
Server Side Rendering where pages are rendered on server and passed on to the browser.
Commonly known as SSR, the initial content is generated on the server aka offline. When client requests a page, the HTML is sent directly to the browser thereby saving precious CPU cycles. However, this implies your server will spend a lot of resources in generating the pages. In addition, you will need to spend engineering resources to build SSR pages, usually a 3-4 month complex endeavor that involves money and more importantly time!
SSR can cause huge spike in server load while serving pages.
There are quite a few solutions in the market that make it easy to render pages. However, there’s a lot of work that is hidden behind the marketing talk. Options such as PreRender, PhantomJS while good on paper, are not always reliable and more importantly don’t work.
When was the last time you saw a website using PreRender or PhantomJS rank higher in SEO?
The question is rhetorical, the answer, NEVER
Now, we have a simple solution, building static HTML pages using Chrome’s headless mode option. Our engineering team talks more about it in the blog post below
How to make your AngularJS website fast
Build static pages using headless mode in Chrome, no more stop gap solutions using prerender or PhantomJS. Serve static HTML pages along with AngularJS using simple .htaccess ruleset.
Do you have a React website that you want to load under a second?
