Building Your Javascript React Website for SEO
On the early year of doing front-end development, I don’t really consider much of my stacks when building website.
Wether it’s an internal website or landing page, I’ll naively just use javascript and React. Specifically create-react-app. Because it’s fun! building website is so much fun with it. And create-react-app enabled you to build website right away without all the hassle setup. I mean, I write the code and it shows up as beautiful website on the screen. What could go wrong?
Well, it turns out how you architecture and build your website actually matters a lot on the SEO performances.
We all know that people wants a website because they want their products, business, or whatever they’re doing can be discovered by a lot of people. So it is a big problem when the people can’t find the website on the search engine like Google because it’s SEO is really bad.
To SSR or Not To SSR
Before you actually start building your website, you need to consider on how the content delivered to the user browser. There are basically 2 methods of delivering the contents.
First, is CSR (Client Side Rendering), this means when the user visiting your website, all the server doing is sending the “frame” HTML markup with empty <div> and the javascript code that will render all the contents into that empty <div>. This way, initially there’s no actual content sent by the server.
Second, we have SSR (Server Side Rendering), this means when the user visiting your website, the server will generate the full HTML markup first and then send it to the user browser, along with CSS and Javascript files needed for that markup. This way, the content already there on the initial request.
You can combined both of this method on your website. Or you can actually use only one way to deliver your content. To spot this in action, you can view page-source of a website. If you can see all the contents in the browser also there in the code, then it is SSR. But if it’s just a little HTML markup with empty div on the body, then it is CSR.
How does this affect your website SEO performance?
SSR is really great for SEO because the search engine crawler can see all the contents on your website easily. Therefor it’s easier to be crawled and get indexed on the search engine.
As for CSR website, because initially there’s no actual content on your website, the web crawler like googlebot can’t actually see the content of your website. It will only see an HTML with empty div. The contents is not there, it needs to be rendered first for it to be available for the bot. So it will rank poorly or even can’t be indexed by the bot.
Good news is, as for mid 2019, Google upgraded their googlebot and now they can render javascript. It means now googlebot can crawl your SPA website as well. But this is not really a fail-safe because it’ll take longer for googlebot to index your website because it needs to render all the javascript first.
You might also want to consider the fact that all other search engine haven’t upgrade their crawler yet.
What kind of website you’re building?
So, before you’re building your website. You need to consider the architecture your website properly based on your needs.
If it’s an internal website with strict access only for users inside a company, you don’t really need SEO for that. So you can go full CSR if you want to.
But if it’s some kind of landing page for product, company profile, or events website, or just something that needs to be indexed properly by search engine and has good SEO. You’ll better off with SSR architecture.
Or if it’s some kind of marketplace, online shop, or e-commerce website, you can do a mix of both. For example doing CSR for the product list or the inventory, and SSR for the product details so it’ll have good SEO.