Component-level data fetching in JSS Next.js apps

Version:

Next.js can prerender pages at build time or on each request using page-level data fetching strategies for each rendering form.

If you want to fetch component-specific data at the component level, you can use a mechanism similar to page-level data fetching by implementing and exporting the getStaticProps for static generation (SG) or the getServerSideProps function for server-side rendering (SSR).

Note

If you include secrets or sensitive information in component-level getStaticProps and getServerSideProps functions, that information will only be included in the client-side bundle in development mode.

Watch the following video for a demonstration of how component-level data fetching works in a JSS app:

If you have suggestions for improving this article, let us know!