308

December 9th, 2020 × #gatsby#nextjs#react

Gatsby vs Next.js in 2021

Compares Gatsby and Next.js for features like server vs static rendering, data management, dynamic pages, and more.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

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 done 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

46:20 - Server or Serverless

  • Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn't care.
  • Next.js - can do server with API routes. Can do serverless if you host on Vercel.

49:44 - SEO

  • Tags
    • Gatsby - Helmet
    • Next - Head
  • Sitemap
    • Plugin for both

49:55 - Plugin Ecosystem

  • Gatsby has lots of plugins that you install
  • Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer.

53:10 - Auth

55:00 - E-commerce

  • Gatsby - options are mostly limited to Snipcart and Shopify like iframe drop in solutions where the majority of operations take place on another site and service.
  • Next.js - hey released a starter boilerplate that leans on an existing headless cart
  • https://rainierwatch.com/

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Share