Gatsby vs Next.js in 2021

Gatsby vs Next.js in 2021

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

Episoder(974)

Hasty Treat - Developing for Slow and Spotty Connections

Hasty Treat - Developing for Slow and Spotty Connections

In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and f...

1 Jun 202016min

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more! Log...

27 Mai 20201h 5min

Hasty Treat - Should You Support IE11?

Hasty Treat - Should You Support IE11?

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision. Sentry - Sponsor If you want to know wha...

25 Mai 202015min

Scott Teaches Wes Svelte and Sapper

Scott Teaches Wes Svelte and Sapper

In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Con...

20 Mai 202051min

Hasty Treat - Scott's New Personal Website

Hasty Treat - Scott's New Personal Website

In this Hasty Treat, Scott and Wes talk about Scott’s new website! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking...

18 Mai 202015min

What's New in Javascript

What's New in Javascript

In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so. LogRocket - Sponsor LogRocket lets...

13 Mai 202048min

Hasty Treat - Wes' New Personal Website

Hasty Treat - Wes' New Personal Website

In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is...

11 Mai 202028min

Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne

Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne

In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for! Sanity - Sponsor Sanity.io is a real-time headless CMS wi...

6 Mai 20201h 1min

Populært innen Politikk og nyheter

giver-og-gjengen-vg
aftenpodden
aftenpodden-usa
forklart
stopp-verden
popradet
det-store-bildet
dine-penger-pengeradet
rss-gukild-johaug
bt-dokumentar-2
lydartikler-fra-aftenposten
hanna-de-heldige
fotballpodden-2
nokon-ma-ga
e24-podden
frokostshowet-pa-p5
aftenbla-bla
rss-ness
rss-penger-polser-og-politikk
rss-dannet-uten-piano