Cache layout files or components

[bitttttten]

We have an e-commerce platform where we have something like: /app/product/[slug]/page.tsx and an accompanying /app/product/[slug]/layout.tsx file.

Our layout file renders the header and footer, and these never change. Only things inside page.tsx. If we add some logging or observability, we can see these components render again and again which leads me to wonder: could we cache the results of layout.tsx files, or mark certain components as cacheable much like we do with full routes or fetch calls?

This way our dynamic renders would speed up by a lot, since the header and footer have already been rendered and the only work that NextJS is really doing would be to render the page.tsx file where all the changes happen.

I imagine if a page does not use params, search params, headers, or cookies that you can consider this component or layout as pure enough to be cacheable.

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community