Hasty Treat - Gatsby Tips

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 Links Gridsom Google Cloud Cloudinary Sanity Image 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