Learn | Next.js

Tags

Top Highlights

• This is possible because getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser.

• Note: Next.js polyfills fetch() on both the client and server. You don't need to import it.

• getStaticProps can only be exported from a page. You can’t export it from non-page files.

• getStaticProps only runs on the server-side

• never run on the client-side

• won’t even be included in the JS bundle for the browser

• getStaticProps can only be exported from a page.

• it’s meant to be run at build time, you won’t be able to use data that’s only available during request time, such as query parameters or HTTP headers.

• can only be exported from a page.

• What If I Need to Fetch Data at Request Time?

• Server-side Rendering.

• Since Static Generation happens once at build time, it's not suitable for data that updates frequently or changes on every user request.

• Fetch External API or Query Database

• write code such as direct database queries without them being sent to browsers.

• One of the reasons for this restriction is that React needs to have all the required data before the page is rendered.

• What If I Need to Fetch Data at Request Time? Since Static Generation happens once at build time, it's not suitable for data that updates frequently or changes on every user request. In cases like this, where your data is likely to change, you can use Server-side Rendering.

• on both the client and server

• This is possible because getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers.