Over past few years, web development has seen many disruptions. New types of frameworks are constantly on the rise and they are constantly being improved to gain competitive advantage over others.
React.js is modern and one of the most advanced frontend technology designed by Facebook.
It has many advantages like
- Seamless Performance with Virtual DOM
- Quick Development
- Modularised Approach
- Zero Dependency
- Declarative Syntax
- Scalability
- Ecosystem
Bla. Bla bla… But Wait… Wait… What about SEO?
These modern javascript frameworks are mainly focused on user experience of creative interactive website or single page website. But, SEO is very important aspect for any web app development and javascript frameworks provide client side rendering (CSR). hmmm…
It means, search engine and social networks will only get javascript tags when they will try to crawl.
Presently, Google has limited capabilities to render and JS site before indexing it as it requires lots of time and processing power to index. In addition, while Google will be able to render the index page of your website it is known to have issues navigating around sites with a router implementation.
This simply means that your site will have very hard time trying to get top position in the search results on Google. 🙁
So… Now??
Basically, we will require SSR (Server Side Rendering) or similar solution to make ReactJS application SEO friendly.
There are couple of ways to achieve our goal.
1) Prerender.io: As name suggest, it renders the pages in advance and serve from the rendered page when crawler tries to access the content. It is open source as well available on cloud with subscription. Also, Along with React, prerender.io is available for AngularJS and Vue.JS.
But this approach has several demerits like:
- Real user and crawler will be served different contents which is something like Cloaking and it can be dangerous.
- Pages are cached for single day. So no, real time data will be served.
- Real user will not get benefit of server side rendering
2) Custom SSR: Building custom SSR is one of the solution to make any website SEO friendly but it require many complex server side implementation and optimisation require. Walmart, big brand on e-commerce has chosen this approach to make their React based ecommerce website SEO friendly. Here is good article written by Walmart regarding their approach to achieve optimised SSR : https://medium.com/walmartlabs/reactjs-ssr-profiling-andcaching-5d8e9e49240c
3) NextJS (Recommended): Next.js is advance open source library which support SSR with react.js.
Next.js makes many things simple for you as follow:
- Server Side rendering by default
- Automatic code splitting
- Simple Client side page routing
- Web pack and Babel customisation
- Facility to implement custom server with express or any other Node.JS HTTP server
- Hot module replacement
What other tools, you would require?
React Helmet: It helps us to manage meta tags which is key part for SEO. React Helmet is an open source library that supports server side rendering as well.
All the tools mentioned in this articles are proved methods and being used by many big brands but from all of above methods, Next.js is more popular and provides more flexibility.