Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Gatsby vs Next.js in 2021

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">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?</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> 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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. 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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 03:34 - Server-rendered</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Both do server rendered</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Gatsby is gone at build time</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> Next is done at build and on deploy</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 05:26 - Static generation</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> getStaticProps()</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> getServerSideProps()</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 08:25 - Re-rendering pages</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Gatsby-cloud</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Next.js has the revalidate flag that will re-render when stale</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 18:54 - Data management</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Gatsby has a built in GraphQL API feature with</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want.</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 23:16 - Client-side data</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="38"> Neither do anything, next.</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 26:33 - Dynamic Pages</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> List of 100 shoes, each one gets a page</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> List of four types of shoes: basketball, runners, casual, bowling, etc.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> List of 10 colors: each color gets its own page.</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> List of 12 sizes, each size gets its own page.</li> <li class="has-line-data" data-line-start="43" data-line-end="49"> Now it gets complicated when you do this: <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> Show me basketball shoes, in red, in size 5</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> 600 pages minimum</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> What about size 6+7?</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Then you get into having to fetch data on the client side - but all your data is in GraphQL?!</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> The queries are different!</li> </ul> </li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Gatsby will get “Hosted GraphQL”: <a href= "https://twitter.com/kylemathews/status/1252803849775009794">https://twitter.com/kylemathews/status/1252803849775009794</a></li> </ul> <p class="has-line-data" data-line-start="51" data-line-end="52"> 30:41 - Routing</p> <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Neither do nested routing still</li> <li class="has-line-data" data-line-start="53" data-line-end="55"> Both do folder based wrapper</li> </ul> <p class="has-line-data" data-line-start="55" data-line-end="56"> 34:50 - Hosting</p> <ul> <li class="has-line-data" data-line-start="56" data-line-end="58"> Anywhere</li> </ul> <p class="has-line-data" data-line-start="58" data-line-end="59"> 35:54 - Images</p> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Compression/resize</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> Lazy loading</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> SVG</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Blur up</li> <li class="has-line-data" data-line-start="63" data-line-end="78"> Next 10 released first revision of Next.js image <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> It’s not as good as Gatbsy-image</li> <li class="has-line-data" data-line-start="65" data-line-end="66"> Must specify width and height, whereas gatsby has fixed and fluid</li> <li class="has-line-data" data-line-start="66" data-line-end="67"> Compression</li> <li class="has-line-data" data-line-start="67" data-line-end="68"> No blur up</li> <li class="has-line-data" data-line-start="68" data-line-end="69"> Yes lazy loading</li> <li class="has-line-data" data-line-start="69" data-line-end="70"> both don’t support gifs</li> <li class="has-line-data" data-line-start="70" data-line-end="72"> Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> Not for long! <a href= "https://twitter.com/ascorbic/status/1320770231657238529">https://twitter.com/ascorbic/status/1320770231657238529</a></li> </ul> </li> <li class="has-line-data" data-line-start="72" data-line-end="73"> Next.js is just <code><image src=""</code></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> Next does remote images</li> <li class="has-line-data" data-line-start="74" data-line-end="75"> Neither have quality or format auto like Cloudinary does</li> <li class="has-line-data" data-line-start="75" data-line-end="76"> Gatsby images have to be compressed at build time</li> <li class="has-line-data" data-line-start="76" data-line-end="78"> Next.js can do it on the fly <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> assuming your server has the right tooling installed</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="78" data-line-end="80"> The GOLD STANDARD - <a href= "https://gridsome.org/docs/images/">https://gridsome.org/docs/images/</a> <ul> <li class="has-line-data" data-line-start="79" data-line-end="80"> Lib authors need to give this a look</li> </ul> </li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href= "https://twitter.com/mxstbr/status/1323279745275101184">https://twitter.com/mxstbr/status/1323279745275101184</a></li> <li class="has-line-data" data-line-start="81" data-line-end="83"> <a href= "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image"> https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image</a></li> </ul> <p class="has-line-data" data-line-start="83" data-line-end="84"> 46:20 - Server or Serverless</p> <ul> <li class="has-line-data" data-line-start="84" data-line-end="85"> Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn’t care.</li> <li class="has-line-data" data-line-start="85" data-line-end="87"> Next.js - can do server with API routes. Can do serverless if you host on Vercel.</li> </ul> <p class="has-line-data" data-line-start="87" data-line-end="88"> 49:44 - SEO</p> <ul> <li class="has-line-data" data-line-start="88" data-line-end="91"> Tags <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> Gatsby - Helmet</li> <li class="has-line-data" data-line-start="90" data-line-end="91"> Next - Head</li> </ul> </li> <li class="has-line-data" data-line-start="91" data-line-end="94"> Sitemap <ul> <li class="has-line-data" data-line-start="92" data-line-end="94"> Plugin for both</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="94" data-line-end="95"> 49:55 - Plugin Ecosystem</p> <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> Gatsby has lots of plugins that you install</li> <li class="has-line-data" data-line-start="96" data-line-end="98"> Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer.</li> </ul> <p class="has-line-data" data-line-start="98" data-line-end="99"> 53:10 - Auth</p> <ul> <li class="has-line-data" data-line-start="99" data-line-end="100"> Neither do auth</li> <li class="has-line-data" data-line-start="100" data-line-end= "101">The first to do baked-in auth solution could get big gains.</li> <li class="has-line-data" data-line-start="101" data-line-end= "103">See Scott’s Svelte Meteor accounts set up. It good. <a href= "https://github.com/leveluptuts/svelte-accounts-ui">https://github.com/leveluptuts/svelte-accounts-ui</a></li> </ul> <p class="has-line-data" data-line-start="103" data-line-end="104"> 55:00 - E-commerce</p> <ul> <li class="has-line-data" data-line-start="104" data-line-end= "105">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.</li> <li class="has-line-data" data-line-start="105" data-line-end= "106">Next.js - hey released a starter boilerplate that leans on an existing headless cart</li> <li class="has-line-data" data-line-start="106" data-line-end= "108"><a href= "https://rainierwatch.com/">https://rainierwatch.com/</a></li> </ul> <h2 class="code-line" data-line-start="108" data-line-end="109"> <a id="Links_108" name="Links_108"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="109" data-line-end= "110"><a href="https://syntax.fm/show/120/gatsby-vs-next">Syntax 120: Gatsby vs Next</a></li> <li class="has-line-data" data-line-start="110" data-line-end= "111"><a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="111" data-line-end= "112"><a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "114"><a href="https://www.meteor.com/">Meteor</a></li> <li class="has-line-data" data-line-start="114" data-line-end= "115"><a href="https://vercel.com/">Vercel</a></li> <li class="has-line-data" data-line-start="115" data-line-end= "116"><a href="https://graphql.org/">GraphQL</a></li> <li class="has-line-data" data-line-start="116" data-line-end= "117"><a href= "https://www.swyx.io/react-sfcs-here/">https://www.swyx.io/react-sfcs-here/</a></li> <li class="has-line-data" data-line-start="117" data-line-end= "118"><a href="https://react-query.tanstack.com/">React Query</a></li> <li class="has-line-data" data-line-start="118" data-line-end= "119"><a href="https://swr.vercel.app/">SWR</a></li> <li class="has-line-data" data-line-start="119" data-line-end= "120"><a href="https://reactrouter.com/">React Router</a></li> <li class="has-line-data" data-line-start="120" data-line-end= "121"><a href= "https://www.gatsbyjs.com/plugins/gatsby-image/">gatsby-image</a></li> <li class="has-line-data" data-line-start="121" data-line-end= "122"><a href="https://cloudinary.com/">Cloudinary</a></li> <li class="has-line-data" data-line-start="122" data-line-end= "123"><a href="https://www.imgix.com/">imgIX</a></li> <li class="has-line-data" data-line-start="123" data-line-end= "124"><a href="https://begin.com/">Begin</a></li> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126"><a href= "https://reactioncommerce.com/">https://reactioncommerce.com/</a></li> <li class="has-line-data" data-line-start="126" data-line-end= "127"><a href="https://www.shopify.com/">Shopify</a></li> <li class="has-line-data" data-line-start="127" data-line-end= "128"><a href="https://snipcart.com/">SnipCart</a></li> <li class="has-line-data" data-line-start="128" data-line-end= "130"><a href="https://woocommerce.com/">WooCommerce</a></li> </ul> <h2 class="code-line" data-line-start="130" data-line-end="131"> <a id="_SIIIIICK__PIIIICKS__130" name= "_SIIIIICK__PIIIICKS__130"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="131" data-line-end= "132">Scott: <a href="https://amzn.to/2TOqDdw">Cobra Drain Zip It</a></li> <li class="has-line-data" data-line-start="132" data-line-end= "138">Wes: Deli Containers: <ul> <li class="has-line-data" data-line-start="133" data-line-end= "134"><a href="https://amzn.to/3kSQmxh">Mixed Boys</a></li> <li class="has-line-data" data-line-start="134" data-line-end= "135"><a href="https://amzn.to/3kUC53h">Small Boys</a></li> <li class="has-line-data" data-line-start="135" data-line-end= "136"><a href="https://amzn.to/3evBh2F">Medium Boys</a></li> <li class="has-line-data" data-line-start="136" data-line-end= "138"><a href="https://amzn.to/2JypwNv">Large Boys</a></li> </ul> </li> </ul> <h2 class="code-line" data-line-start="138" data-line-end="139"> <a id="Shameless_Plugs_138" name= "Shameless_Plugs_138"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="139" data-line-end= "140">Scott: <a href= "https://www.leveluptutorials.com/pro">Animating Svelte</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="140" data-line-end= "142">Wes: <a href="https://advancedreact.com/">Advanced React Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="142" data-line-end="143"> <a id="Tweet_us_your_tasty_treats_142" name= "Tweet_us_your_tasty_treats_142"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="143" data-line-end= "144"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="144" data-line-end= "145"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="145" data-line-end= "146"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="146" data-line-end= "147"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="147" data-line-end= "148"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="148" data-line-end= "149"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="149" data-line-end= "150">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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 

Aplikace Youradio Talk

Gatsby vs Next.js in 2021

Poslechněte si podcast