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?
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/
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.
Anytime! 👌
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:
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.
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.
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
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
Thanks for the advice is there a detailed explanation of how to do this anywhere? Im still relatively new to web dev. Thanks!
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?
Its a MERN stack app. mongodb hosted on Atlas, node hosted on Heroku, and front end hosted on AWS Amplify
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!