In short, create-react-app is not good for SEO.
why?
create-react-app is a SPA (single page application). In a SPA, all necessary HTML, JavaScript, and CSS code retrieved by the browser with a single page load or data add dynamically to the page based on certain actions.
Search engines and social media look for SEO meta tags on the website. Based on these meta tags, display formated content to the user.
By default in create-react-app, metatag like title and description mentioned in public/index.html. When the page loads, the default title shows in the tab of the browser and for every route, it follows the same.
What if, you are fetching an article post from an API and after fetching the data, it updates the value of title and description. But the default title shows up in the SEO, not the fetching title. If your app depends on SEO then it is a huge problem.
So how you can overcome this?
You need to prerender the create-react-app. To prerender, You can download either of two npm package as below:
The above plugins work well if you are not using Windows / local storage objects in your project (Javascript), else you need to follow some extra checks.
Moreover, you can use Gatsby and the next JS are the frameworks that are built on React with SEO friendly pre-rendered website.
You can follow me on Twitter @taimoorsattar7 for more updates.
Top comments (4)
why even use react?
You can use nextjs for your main site, but you can build app and in this case you should use react.
next, Gatsby and create-react-app are all built on React. But all of these have the different infrastructure.
create-react-app: Single-Page-Application
Gatsby: Static site Generator
Next JS: Static and server sider prerender
Wow! Thank you Taimoor for this blog.