Use Slice API of Gastby for:

• the header
• the footer

The Slice API allows you to define highly-shared components in your site, which will then inform Gatsby to build those shared components only once. After the files are built, Gatsby will then stitch the resulting markup and JavaScript to the pages that include that shared component. This means that changes to highly-shared components (such as headers, footers, and common layouts) no longer require a rebuild of all pages that use that shared component.

https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#gatsby-slice-api