0

We have HEADER and FOOTER components inside _app.tsx and we are using SSR and SSG. But we want to prerender html for HEADER and FOOTER components also like the pages (for effective SEO).

As we cant do use getServerSideProps and getStaticProps inside _app.tsx, we are using HEADER and FOOTER components in each and every page and calling the APIs for HEADER and FOOTER in getServerSideProps inside every page. But which is leading to render HEADER and FOOTER components in every page. So is there any way to make HEADER and FOOTER components in one file and still get prerendering for them too?

Dr tech
  • 11
  • 4
  • Would something like [Persistent navigation in a NextJs _app](https://stackoverflow.com/a/65628271/1870780) or [Next.js - Footer / Header loading via API only once, server side](https://stackoverflow.com/a/67452646/1870780) work for your use-case? – juliomalves Aug 28 '21 at 17:30
  • [@Juliomalves](https://stackoverflow.com/users/1870780/juliomalves) Yeah! but as per the document https://nextjs.org/docs/messages/opt-out-auto-static-optimization, this causes all non-getStaticProps pages to be executed on the server. So do we have anything to worry about that? – Dr tech Aug 29 '21 at 12:12

1 Answers1

1

You can create a layout component and add it inside your "_app.ts" file, so the layout is shared throughout your application.

You can find more information about this on Next Js documentation https://nextjs.org/docs/basic-features/layouts

Appy Mango
  • 1,298
  • 5
  • 16