Hasty Treat - Upgrading Next.js Syntax Site

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