skip to Main Content

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?

  1. Can we upgrade the existing MERN application to NextJs?
  2. Is there any other methods to SEO this MERN Application?
  3. 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


  1. Yes, You cannot do SEO of a react application. You have to use SSR for it.

    Answers to your questions:

    1. Can we upgrade the existing MERN application to NextJs?

    • 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:

      • Routing (NextJs has a different way of routing)
      • Way of Importing Styles
      • Run Scripts in package.json
      • If you have used browser things like window object, localStorage then you have to handle those in SSR
      • And there may be other issues you might face while running the app

    2. Is there any other methods to SEO this MERN Application?

    • No, SSR is a must

    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?

    • Go with NextJs if SEO is a must and you want SSR (Ex: E-Commerce Site, Personal Site)
    • Go with React if no SEO (Ex: Admin Panel, Specific User-based Web App)
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search