0

I am working on a website that uses Nextjs and React. We are using a mix of static generation as well as SSR. One of the components we're using is shared by every page on the site. It is a header. The issue is that his header requires some very large queries in order to get all the information it needs to properly render. Ideally, we want to "statically render" this component so that it can be used by all pages at build time, even for pages that are not statically rendered. As it stands, rendering this header every time a user visits our website significantly increases load times as well as puts an unnecessary load on our DB.

Is there any way to go about doing something like "statically rendering" a single component that's shared by every page? Part of the code for the header looks something like

const { loading, error, data } = useQuery(QUERY);
const { loading: productLoading, data: productData } = useQuery(QUERY_PRODUCT);
const { data: otherData } = useQuery(OTHER_DATA);
const { data: otherOtherData } = useQuery(OTHER_OTHER_DATA);

Ideally we don't want to run these queries every time a user visits the website.

koko
  • 158
  • 1
  • 7

1 Answers1

0

If you are going to use the same data for every page, you may consider using a redux-store or storing them in a context provider.

You may use the codes sample similar to https://stackoverflow.com/a/64924281/2822041 where you create a context and provider which is accessible in all your pages.

The other method, ideally, would be to "cache" using Redis so that you do not need to query the data over and over again.

Someone Special
  • 12,479
  • 7
  • 45
  • 76