I am a newbie to development and I recently created a MERN Stack Application which uses reactjs as the frontend, Nodejs with express as the Backend, and MongoDB as the Database. After that, I searched for some methods to SEO this application. But in many articles on the internet, they have mentioned that we can’t SEO Reactjs applications and instead we need to implement SSR(Server side rendering). So now I have the following questions. Could someone explain these, please?
- Can we upgrade the existing MERN application to NextJs?
- Is there any other methods to SEO this MERN Application?
- So do I have to prevent using React as the frontend in my future projects? Instead, do I need to use Nextjs definitely in my future projects? If so reactjs is useless?
Thank You.
2
Answers
Yes, You cannot do
SEO
of areact
application. You have to useSSR
for it.Answers to your questions:
1. Can we upgrade the existing
MERN
application toNextJs
?Yes you can but it’s a lengthy manual process. All of your components you can use directly. There are many things you need to change:
package.json
window
object,localStorage
then you have to handle those in SSR2. Is there any other methods to SEO this MERN Application?
3. Do I have to prevent using React as the frontend in my future projects? Instead, do I need to use Nextjs definitely in my future projects? If so reactjs is useless?
NextJs
if SEO is a must and you want SSR (Ex: E-Commerce Site, Personal Site)React
if no SEO (Ex: Admin Panel, Specific User-based Web App)Surjeet has covered your first question nicely. In answer to you second and third question there are tools such as React Router and React Helmet which can add some SEO to a React project. There’s a helpful article about it here:
https://medium.com/@prestonwallace/3-ways-improve-react-seo-without-isomorphic-app-a6354595e400
The quick summary is that React Router will allow you to generate a uri for each new route. React Helmet creates metadata tags in the header of a component such as a title or the description of the page, which googlebot can then pick up.