SEO for React.js
SEO (Search Engine Optimization) is an important part of any website. If you want your web to be “findable” by the people, you have to do SEO better. However, the SPA website (Single-Page Application) using lib or famous frameworks such as React, Vue, Angular, etc. have bad SEO. Because these websites are coded basing on the method of CSR (Client-Side Rendering). So when you disable js on the browser, your website also can’t display anymore (the browsers do not execute React code).
But now, “client-side Rendering CAN NOT hurt your page rank anymore, because now we have Next.js and Gatsby.js. They’re like angels to save your React websites from “dead library.”
So what are they? How they can improve SEO for React.js? Let’s check out with us!
Next.js
Next.js is a free and open-source web application framework based on React.js, Node.js, web-pack, and Babel.js for building server-side rendered and/or static web applications using React.
The original concept of Next.js is very simple. The website’s content should be rendered from server Server-side Rendering (SSR) to optimize the web’s SEO. The sites using PHP are typical examples. When you disable js on the browser, but content still displays on the website, then Google’s crawlers can find these contents. It means that your SEO is running.
For the later versions, Next.js offers some more features to help developers build a static page which do not need dynamic content. In addition, Next.js supports some powerful features such as Hot Code Reloading, Automatic Routing, Automatic Code Splitting, Prefetching, etc.
Gatsby.js
Gatsby.js is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.
In short, Gatby.js is a set of static site generators. It means that after you run yarn build ỏ npm build, Gatsby will create a static web based on your codes (like Hugo and Jekyll). Then, you can host the web on any static hosting services (AWS S3, Netlify, Surge…)
The mechanism of Gatsby.js is based on JAMstack – a new structure using JavaScript, APIs, Markup, and without any databases or server-side languages.
Next.js Vs. Gatsby.js
Both of them support most of the powerful features like reloading, code splitting, but the difference is their mechanism: Server-side Rendering vs. Static Site Generator.
Static Site Generator will generate pure HTML / CSS / JS after finishing building (at build time). The performance and pricing of static pages are good, but whenever you update content, you must re-run your build of the web as well as re-upload hosting. It’s quite troublesome if you don’t have a CI/CD.
Server-side Rendering will generate HTML / CSS / JS whenever there is a new request from the server (at run time). Your content will be updated very quickly. However, it means that you have to have another server to render content, which brings several problems such as handle resources, the number of concurrent requests … of that server.
In addition, Gatsby uses GraphQL to handle data. Meanwhile, Next.js does not support ready-to-use noodles to handle data for you, so you can use whatever you want.
Conclusion
To optimize your SEO for React.js, you can choose any frameworks, but to get the best result, you should consider depending on your website.
Next.js is suitable for the websites that require frequent updates of dynamic content and a large number of dynamic pages. Or you don’t like GraphQL. You want to handle your data by yourself. You want to “shine” as your way with Redux, Mobx, or anything.
Gatsby.js can handle anything, from landing pages to blogs, e-commerce with not too many products.
Next.js and Gatsby.js are React frameworks you should try (besides the CRA). They have a lot of cool things for you to make an SEO-friendly website using React.
Let use and enjoy their beauty in your own way!
Source: https://blog.quanghd.me/posts/seo-v%E1%BB%9Bi-react-js-next-js-vs-gatsby-js
