Next.js vs Gatsby for SEO
ฝัง
- เผยแพร่เมื่อ 19 ม.ค. 2025
- I explain the differences between how Next.js and Gatsby work and which one I recommend for good SEO.
Links from video:
• When Should You Use Ga...
developers.goo...
Playlist: • React Hooks Tutorial
----
Checkout my side projects:
If you into cooking: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/ben...
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad
----
Follow me online: voidpet.com/be...
#benawad
You just explained the basics of everything I needed to know before starting a project and gave me some really helpful insights on how to explain them to someone else too. Thank you a lot!
That decision tree at the end for choosing which framework to use is super useful.
Thanks a ton for this, Ben. Cleared up a lot of confusion I had over the differences. Oh, and Gatsby's amazing!
Bruh. You can be a great teacher! SSR and CSR was a confusing topic and you simplified it with those simple graph
it is important to note that with gatsby you can do dynamic queries as well. You can use apollo in gatsby so you can do build time rendering (as shown) as well as client side rendering when needed.
I like the nonchalant style. It's better to capture and share the info than to get hung-up perfecting it! That's very Agile!
I thought that GatsbyJS and CRA is everything I need. Thanks for covering next.js.
In my stack, I use GatsbyJS for a landing page where authentication takes place and CRA for an app.
Thanks for the great explanation !
My question is - "Where does Remix fits in that graph ? @11:38 "
so for woocommerce site with react app as the front end (products will be updating weekly, only stock daily) what you recommend is best nextjs or gatsby?
I'm in between the two frameworks right now. I'm using the storefront shopify API. Gatsby is nice, and extremely fast (since it's all static). NextJS is still much faster than our current solution (Shopify MPA) but still slower than Gatsby.
NextJS has more customisation options and features than NextJs. The biggest one is that your entire site doesn't have to be static, you can have SSR pages and CSR pages opposed to all of them being static.
So I'm leaning towards NextJS
@@lmfao7224 Thanks. I already made my decision before even your suggestion. Already started the project with nextjs and looks very promising.
Hi Ben, before I offer my criticism of this video, I want to start by saying I super appreciate your videos and have learned a lot from you. Thanks for all that you do.
Now for the criticism - I think this particular video is misinforming people.
Gatsby hydrates into a full react app after rendering in the browser. Thus you can fetch data from an API not only at build time but also at run time. With the flexibility to decide what data to pre-render and what to fetch at run time, it gives you the best of all worlds.
I build robust web apps with Gatsby alone (using JAM Stack). Most of the content is prerendered which makes Google happy. Once a user logs in, I have Gatsby drop into SPA-mode and then it fetches data from my GraphQL API and other data sources to populate user-specific data just like a CRA app would.
This setup makes apps that are screaming fast. Plus Gatsby does a ton of other awesome stuff for you - as previously mentioned - such as image optimization, offline mode, pre-fetching, code splitting, etc. It's the cat's pajamas.
The nice thing about this approach is that of course, you can host any kind of backend server you want, but it allows you the flexibility to 1) avoid the time sink of setting up a backend server altogether and 2) avoid scalability issues by consuming serverless services from AWS instead (AppSync, Lambda, Cognito).
I suppose for NextJS you can sort of emulate this with Zeit Now or other SSR hosting services, but it feels less flexible and maybe feels like backing oneself into a corner. I don't mean this to sound derogatory but I see NextJS as nothing more than a rebranding of the traditional server-side MVC frameworks which I think the modern web is deliberately trying to move away from. Those MVC's reigned in their day and served a solid purpose when we didn't have anything better, but now we have more flexible options that are more cost-effective throughout the entire app lifecycle (especially if you take advantage of CDN services such as Netlify that offer CI/CD out of the box).
For all of the above-mentioned reasons, I would boldly claim that Gatsby/Gridsome and JAMStack are moving the web forward whereas NextJS is kind of holding the web stationary (and CRA is just stuck somewhere in purgatory with no clear purpose or direction).
I agree Gatsby can be great for situations where you want to prerender some stuff and I like the framework, but it can't ssr dynamic content which is a must for some websites
I think Gatsby, CRA, and Next all have their place in the area React frameworks, with different use cases.
I've used all three.
Gatsby: static focus, easy plugins for many data sources (CSV, json, markdown, EXCELLENT replacement for all things Wordpress with theming coming soon, lots of starters, CMS plugins, easy image integrations CMSs, etc. Gatsby sites will perform the best because can be served from CDNs easily. Ideal for typical marketing websites, but can easily add dynamic content if you're ok with not SSRing those parts.
Next: Dynamic SSR. You'll have a latency penalty compared with Gatsby but is great for larger public apps that need SEO, fast initial load, and support for legacy / slow devices. Awesome tool for building a social media site or large e commerce store.
CRA: WEB APPS. This is not purgatory! This is if you need complete flexibility, power, and performance of a purely client side single page app. You get NO pre rendering, but if you don't need it, you shouldn't do it. Think client-only apps like Google AdWords or any workflow app. You can actually statically deploy a CRA and serve it from a CDN for convenience, but the client will only load it once.
@@jessewright870 I love your answer and I have done research for multiple hours and yours the best comparison I see so far.
I've subscribed to your channel because of this kind of nice content.
If you used a CMS, webhooks are a pretty nifty thing with next.js SSG and/or gatsby!
Pffff, everything at the point. Exactly what I was looking for. Double Like 👍👍
Why not implement dynamic rendering using rendertron if we only care about SEO to serve static pages
What do you think about jekyll?
I think people underestimate Gatsby a bit. Gatsby initially serves static HTML, but onMount it can load data and update the UI, right? So theoretically it can do everything NextJS can. I know, sometimes it is better to just pick NextJS. Just saying that Gatsby isn't just static site generator.
Gatsby does not do dynamic SSR
@@bawad But it does perform dynamic CSR after rehydration. It's simply in more complete alignment with the JAMstack philosophy where not only are dynamic fetch performed through client side javascript but even dynamic eliminating the idea of a host server as an intermediate for api calls, shifting the power to javascript (CSR).
Update video on Gatsby 4?
What about a web app, where you want to rank the login and signup pages?
Nobody cares about the SEO for the stuff behind after logging in, so CRA is good. But how do we keep SEO of signup/login page good.
Do you know how good is netlify for SEO?
With Next and Gatsby they're both sending down html so their first paint is fast. However aren't they both React applications? So there's some rehydration that needs to take place before React is fully hooked into the page and able to respond to user feedback. I've read that rehydration can create a bad user experience due to the time between when the content looks ready, and when it's actually ready to respond to interaction.
How do Next and Gatsby handle rehydration? Does one handle it better than the other?
I'm not sure what the differences in rehydration are
@@bawad according to the Google info graphic next falls under the SSR with rehydration and Gatsby is considered prerendering. I need to do some experimentation and see if that's true.
Hi Ben, what about a property listing portal? Is Gatsby or Next more suitable?
If you are going to update the listing a lot then you should use next.
@@someucmispersonicus3902 Thanks Chris. Shouldn't listings site (be it property or vehicles...) be suitable for Gatsby? since they r akin to ecommerce sites which r also a listings site. I m still not clear as to when exactly to use Gatsby or Next. Another example... A chat site ll b suitable to use next. However, what about an ecommerce site with chat features? In such case, use next or Gatsby? Thanks :)
If your not constantly updating the listings on the ecommerce website or you don't care about SEO I would pick gatsby
otherwise I would pick next.js
@@bawad Thanks Ben for ya advice. Why would picking Gatsby compromise SEO? I thought both Next and Gatsby are both positive for SEO, unlike CRA
Perfect, thank you!
did u change ur website to using gatsby(saffronapp)
th-cam.com/video/5rUNlYs6wu4/w-d-xo.html
So how come you're saying you don't care about good SEO on your saffron app? Do you have another landing page that links to the web app or something?
Great content btw. Well said and clear.
wasn't a priority at the time, eventually switched the landing page to gatsby th-cam.com/video/5rUNlYs6wu4/w-d-xo.html
@@bawad I see. Thanks for the reply 👍
Really clear. Thanks a lot
Hi Ben, when can we expect monorepo with cra typescript?
idk
You said you have no experience thus far with next's static export option. Me neither, but I read a lot into next vs cra vs gatsby. If it works like gatsby, whats is the purpose of gatsby anyway?
You can do CSR, SSR and Prerendering (can be different on every single page) with next very easily. CRA is certainely good for beginners, to learn react basics, without opinionated frameworks like next or gatsby. But I don't really see any outstanding advantage of gatsby over next.
It feels like its much more worth to learn and work with next only for enterprise products, since it can do everything gatsby can. And that way I save my time learning another framework.
once next.js has full support for static rendering I think Gatsby becomes less attractive
although Gatsby is still way ahead when it comes to plugins for blogs and stuff
@@bawad what do you mean by "full support"? Is there something gatsby can do that next cant when it comes to static site generation?
A possible suggestion for a new series would be building like a shop marketplace / eBay clone full stack, similar to what you did with AirBnB using something like Stripe Connect
Hi, I have a question. So i need to create a blog site. It contains 2 pages: home and admin. I will post content(text, images, video) every day. So I guess i need to use Gatsby, because data is not frequenly changing. But the site is also has admin page which is dashboard. That's where i post content to the server then fetch from API. I need good SEO. But i don't want google index my admin page. And even if somebody knows that i have one without searching on google. I will have security. So My question is Do I need to use CRA over Gatsby? I need Good SEO, and i have admin page.
I would go with Gatsby. You can have your admin panel be private and get good SEO with your other pages
@@bawad But i need to rebuild site every time i post smth then. While Nextjs handles it and all i have to do is just post content, refresh the page(make new API call) and the new content is arrived.
if you use something like netlify, it will be easy to deploy/rebuild the site and should be complete in under a minute
can't we do ssr now with gatsby?
gatsby says it does ssr, but it's a different kind than next.js ssr
Hey Ben,
can I have a video of React Ssr with multiple routes.
Its a request.
Please.
give next.js a try
@@bawad is it possible to create dynamic routes with route params in next js?
awesome content right there
If you have CI/CD it doesnt matter how much content is updated for gatsby imo
amazing, thanks.
greeeeat! thank you!
pixel-perfect man
This is not true anymore. Next can do exactly what gatsby does now.
biblical!
Honestly, learning webpack isn't all that hard
:)
How long?
@@jancifoxhound6380 What do you mean how long?
@@llollercoaster How long you learned webpack
@@jancifoxhound6380 Not too long, maybe like a week
@@jancifoxhound6380 I'd suggest trying to manually set up a webpack config once, for maybe typescript or jsx, and get it working. then after you're comfortable with that maybe try adding some loaders or plugins.
Then I'd look into creating a project with CRA and ejecting it, to see the settings that they give you, same with using the webpack CLI to init a project. They'll have a lot of the best practices / commonly used tools already configured. You can mess with them, and once you're comfortable with what they do, you can easily write your own webpack configs to do all sorts of fun and unique stuff that other frameworks might abstract away from you.
next.js aka django copy