Developers May 28, 2020

Rebuilding my react app for seo purposes. What elese do I not know?

jaen

Hi all i recently released my first web app( https://www.nosebuttr.com ). When I finally got around to thinking about SEO, I realized that since react apps are rendered client side google cant access all of the pages properly. I believe the best course of action is to rebuild my app with next.js because seo is going to be incredibly important for the success of my website.

Is there anything else i should consider while rebuilding that will be important in the future?(the app is currently built with esentially naked react + react router)

Is rebuilding with next.js the best course of action?

  1. 2

    I'm not familiar with next.js but maybe porting your existing React app to Gatsby is an option?

    https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/

    1. 1

      yes, I've read that gatsby and next.js do essentially the same thing. Based on my first impression of the gatsby docs you linked it looks like it might be easier for me to use gatsby! thanks for recommending this.

      1. 1

        Gatsby and Next.js will both work. But they have their pros and cons, so you should do your research to see which works better for you. Here are some thoughts:

        • Next does both server-side-rendering (SSR) and static sited generation (SSG) while Gatsby is SSG only.
        • Next has a simpler API and easier learning curve; Gatsby is more complex with the inclusion of GraphQL.
        • Gatsby has a richer ecosystem of plugins and themes compared to Next

        I decided to go with Gatsby mostly for the plugins and ecosystem, but I have to say that the learning curve if you don't know GraphQL can be a bit difficult.

        Part of the question would be whether your site is dynamic or static. If you were building an "interactive" site like Indiehackers with a lot of dynamic content, you'd probably be better off with Next.js and SSR.

        But if you're building a static marketing site + a react app, then either will do but I think Gatsby is a more powerful static site generator b/c of the plugins and ecosystem.

        1. 1

          Yea I ended up going with gatsby and it has worked out really well. The plugins are great and I have been able to avoid learning how to use GraphQL because it's not really required to get things working and pretty easy to code around.

  2. 1

    In case you're interested, I had some free time and wrote that blog post 😅
    Posted it here on Indie Hackers: https://www.indiehackers.com/post/stitching-together-vanilla-react-and-next-js-with-nginx-e711b8c920

  3. 1

    I ran into a similar issue with my app https://strands.io/

    This may be more work depending on your current setup, but rather than migrate the entire application to next.js I am now running two separate apps that are proxied with nginx

    The config essentially works like this:

    request -> next.js app
    if route exists, serve page
    if 404, request -> vanilla react app

    This has worked well for the time being and saved me a lot of time, especially since i'm still in the prototyping stage

    Also, it does have it's pros in terms of separating concerns and scaling out in the future

    1. 1

      Thanks for the advice is there a detailed explanation of how to do this anywhere? Im still relatively new to web dev. Thanks!

      1. 1

        I don't know of any although I've been looking for a blog post to write so maybe I'll do a quick write up on it :)

        I'm sure if we both had this issue, other people will have too

        Do you mind me asking how you host your application?

        1. 1

          Its a MERN stack app. mongodb hosted on Atlas, node hosted on Heroku, and front end hosted on AWS Amplify

          1. 1

            ahh got it
            so in it's current state my proposal wouldn't help too much
            but i'll probably write something up nonetheless cause why not!

Recommended Posts