Component-level data fetching in JSS Next.js apps
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 function for static generation (SG) or the getServerSideProps function for server-side rendering (SSR).
Do not include secrets or sensitive information in component-level getStaticProps and getServerSideProps functions. These functions are included in the client-side bundle. Also included in the client bundle are any imports the functions depend on, even if the client-side code does not use the imports.
This does not affect page-level getStaticProps and getServerSideProps functions.
Watch the following video for a demonstration of how component-level data fetching works in a JSS app: