Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Upgrading Next.js Syntax Site

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 Hasty Treat, Scott and Wes talk about their experience upgrading <a href="http://syntax.fm/">Syntax.fm</a> and some of the site’s big changes.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 02:26 - The old Syntax site</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Next.js</li> <li class="has-line-data" data-line-start="17" data-line-end="22"> Custom server for <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> API - shows, Latest shows, sick picks</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> On-demand page builds</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> Custom routing</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 06:41 - The new Syntax site</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="28"> Next.js has solved those things now, no need for a custom server. <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> API Routes</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Custom routing is now done with [pages]</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Very fast to load</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Very fast to build</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Very fast to deploy</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> It’s now a “dynamic static site”</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Zeit Now 1 to “Vercel”</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Huge thanks to <a href="https://twitter.com/timneutkens">Tim Neutkens</a> and <a href= "https://twitter.com/luis_fades">Luis Alvarez</a> from Vercel for making it happen.</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 13:23 - Why not:</p> <ul> <li class="has-line-data" data-line-start="37" data-line-end="40"> Gatsby <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Entire site would need to be regenerated exactly at 9am eastern</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes</li> </ul> </li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Sapper</li> </ul> <h2 class="code-line" data-line-start="42" data-line-end="43"> <a id="Links_42" name="Links_42"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://sapper.svelte.dev/">Sapper</a></li> <li class="has-line-data" data-line-start="46" data-line-end="48"> <a href="https://vercel.com/">Vercel</a></li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Tweet_us_your_tasty_treats_48" name= "Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 02:26 - The old Syntax site
  Next.js
 Custom server for  API - shows, Latest shows, sick picks
 On-demand page builds
 Custom routing

  06:41 - The new Syntax site
  Next.js has solved those things now, no need for a custom server. API Routes
 On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose
 Custom routing is now done with [pages]

 Very fast to load
 Very fast to build
 Very fast to deploy
 It’s now a “dynamic static site”
 Zeit Now 1 to “Vercel”
 Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen.
  13:23 - Why not:
  Gatsby  Entire site would need to be regenerated exactly at 9am eastern
 API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes

 Sapper
  Links  Next.js

 Gatsby

 Sapper

 Vercel

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Hasty Treat - Upgrading Next.js Syntax Site

Poslechněte si podcast