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
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
