On the early year of doing front-end development, I don’t really consider much of my stacks when building website.
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>. This way, initially there’s no actual content sent by the server.
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.
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.