275

August 17th, 2020 × #Gatsby#React#Web Development

Hasty Treat - Gatsby Tips

Wes Bos and Scott Tolinski discuss tips for improving Gatsby websites, including layouts, animations, build optimization, and more.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects

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:02 - React Helmet

  • Make a re-usable SEO component that sets defaults. Spread children to override.

04:27 - When in doubt, stop the build and restart

  • Gatsby clean
  • Nuke node_modules + package-lock

05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser

06:44 - Run the build command locally to troubleshoot prod

  • Dev mode isn't SSG'd - people overlook this

08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser

  • wrapPageElement and wrapRootElement

09:50 - Consider just adding the layout component manually to each page

  • This will allow you to skip the layout if you need to have a page that isn't typical

11:21 - Layout is not suitable for unmount animations

  • Orchestrating individual component animations in Gatsby isn't easy, use wrapPageElement to write your animations or delays for internally unmounted components.

12:59 - use onCreatePage to pass context to the layout

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions;

  if (page.path.match(/thumbnail/)) {
    page.context.layout = 'thumbnail';
    createPage(page);
  }
};

14:03 - You don't have to query for everything

  • Hard-coding data in html/jsx is super valid

15:32 - Gatsby Parallel Runner

  • For lots of images

Tweet us your tasty treats!

Share