meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

Gatsby vs Next.js in 2021

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 9 December 2020

⏱️ 69 minutes

🧾️ Download transcript

Summary

In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true? Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:34 - Server-rendered Both do server rendered Gatsby is gone at build time Next is done at build and on deploy 05:26 - Static generation getStaticProps() getServerSideProps() 08:25 - Re-rendering pages Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale 18:54 - Data management Gatsby has a built in GraphQL API feature with Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want. 23:16 - Client-side data Neither do anything, next. 26:33 - Dynamic Pages List of 100 shoes, each one gets a page List of four types of shoes: basketball, runners, casual, bowling, etc. List of 10 colors: each color gets its own page. List of 12 sizes, each size gets its own page. Now it gets complicated when you do this: Show me basketball shoes, in red, in size 5 600 pages minimum What about size 6+7? Then you get into having to fetch data on the client side - but all your data is in GraphQL?! The queries are different! Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794 30:41 - Routing Neither do nested routing still Both do folder based wrapper 34:50 - Hosting Anywhere 35:54 - Images Compression/resize Lazy loading SVG Blur up Next 10 released first revision of Next.js image It’s not as good as Gatbsy-image Must specify width and height, whereas gatsby has fixed and fluid Compression No blur up Yes lazy loading both don’t support gifs Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it Not for long! https://twitter.com/ascorbic/status/1320770231657238529 Next.js is just

Transcript

Click on a timestamp to play from that location

0:00.0

You're listening to Syntax, the podcast with the tastiest web development treats out there.

0:06.0

Strap yourself in and get ready.

0:08.0

Here is Scott Telinsky and West Boss.

0:10.4

Welcome to Syntax.

0:12.4

Today is, I bet this is going to be one of our most listened to episodes ever because the last time we did this episode was one of the most popular episodes and that is Gatsby versus next in 20-20,

0:25.0

2021.

0:26.0

This is, we're recording this in early November,

0:29.1

so I would say that this stuff will probably hold,

0:31.8

hold true for at least halfway through 2021, would you say that this stuff will probably hold true for at least halfway through 2021, would you say, Scott?

0:35.5

Yeah, it is very funny because I was thinking about changing this episode's title to be 2021 rather than 20-20 and then I was like well well who knows where we're you know how

0:48.6

things will change but yeah I'm excited about this.

0:51.3

Awesome today we are sponsored by two awesome companies first I'm excited about this. Awesome.

0:52.6

Today we are sponsored by two awesome companies.

0:54.8

First one is Sanity, which is your structure content,

0:57.6

CMS, and second one is Century.

1:00.2

Does all of your error and exception tracking.

1:02.5

So we're going to talk about next versus Gatsby.

1:05.8

There's been a lot of stuff that has happened

1:09.6

in the last couple of weeks.

1:11.3

Most notably, next 10 came out and they dropped the very early image

1:16.3

component. We'll talk about that in a bit. And in Next Nine, they also dropped a

1:21.2

whole bunch of statically rendered

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.