Next.js vs Gatsby for SEO

Links from video:

----
Checkout my side projects:

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

[regular]

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!

[rickelmonoggin]

That decision tree at the end for choosing which framework to use is super useful.

[joelh]

Thanks a ton for this, Ben. Cleared up a lot of confusion I had over the differences. Oh, and Gatsby's amazing!

[pockets]

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.

[developingdeveloper]

Bruh. You can be a great teacher! SSR and CSR was a confusing topic and you simplified it with those simple graph

[Guandjoy]

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.

[kevintlu]

If you used a CMS, webhooks are a pretty nifty thing with next.js SSG and/or gatsby!

[jillians.estrella]

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).

[saurabhbhatia]

Thanks for the great explanation !
My question is - "Where does Remix fits in that graph ? @11:38 "

[nathanleach]

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!

[marcosangelmedina]

Pffff, everything at the point. Exactly what I was looking for. Double Like 👍👍

[cismuz]

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.

[iam_jeremy]

I've subscribed to your channel because of this kind of nice content.

[Nobinjakjon]

Why not implement dynamic rendering using rendertron if we only care about SEO to serve static pages

[lmfao]

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

[alexkey]

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?

[rahultech]

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.

[oemeraran]

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.

[dimos]

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.

[MaxRunia]

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?