CODEWITHSUNDEEP
reactjsnext.js
Gabriel TN
Gabriel TN

Reputation: 754

When exactly is Next.js “build-time” happening?

I'm reading Next.js fetching data part of the documentation and one question came to my mind.

Next.js can fetch data with getStaticProps, getStaticPaths, getInitialProps and getServerSideProps, right?

But some happens on Build-time as I quote:

getStaticProps (Static Generation): Fetch data at build-time

When is this Build-time happening?

Is it when we run npm run build? (To build the production build)

Or when the user accesses our Next.js app? (On each request)

Upvotes: 51

Views: 17746

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19772

Build-time occurs when the app is compiled for production: next build

Run-time occurs when the app is running in production: next start

getInitialProps

This runs on both the client and the server during run-time for every page request. Most common use case is retrieving some sort of shared data (like a session that lets the client and server know if a user is navigating to a specific page) before the requested page loads. This always runs before getServerSideProps. While its usage is technically discouraged, sometimes it absolutely necessary to do some logic on both the client and server.

getServerSideProps

This only runs on the server during run-time for every page request. Most common use case would be to retrieve up-to-date, page-specific data (like a product's pricing and displaying how much of it is in stock) from a database before a page loads. This is important when you want a page to be search engine optimized (SEO), where the search engine indexes the most up-to-date site data (we wouldn't want our product to show "In stock - 100 units," when it's actually a discontinued product!).

getStaticProps

This only runs during build-time (sort of). It's great for sites whose data and pages don't update that often. The advantage of this approach is the page is statically generated, so if a user requests the page, they'll download an optimized page where the dynamic data is already baked into it. Most common use case would be a blog or some sort of large shopping catalog of products that may not change that often.

getStaticPaths

This only runs during build-time (sort of). It's great for pre-rendering similar paths (like a /blog/:id) that require dynamic data to be used at build-time. When used in conjunction with getStaticProps, it generates the dynamic pages from a database/flat file/some sort of data structure, which Next can then statically serve. An example use case would be a blog that has many blog posts which share the same page layout and similar page URL structure, but require the content to be dynamically baked into the page when the app is being built.

Why are getStaticProps and getStaticProps sort of ran during build-time? Well, Next introduced revalidate with fallback options that allows these two Nextjs functions to be ran during run-time after a timeout in seconds. This is useful if you want your page to be statically regenerated, but it should only be regenerated every n amount of seconds. The upside is that the page doesn't need to request dynamic data when navigated to, but the downside is that the page may initially show stale data. A page won't be regenerated until a user visits it (to trigger the revalidation), and then the same user (or another user) visits the same page to see the most up-to-date version of it. This has the unavoidable consequence of User A seeing stale data while user B sees accurate data. For some apps, this is no big deal, for others it's unacceptable(†).

† If you're using a version of Next v12.2.0+, you can use On-demand Revalidation to mitigate a stale static page from being shown to users if/when its data has been updated.

Client-Side Rendering

And lastly, there's client-side rendering which are assets requested at run-time on the client (the browser) which aren't vital for SEO; or, there's some JavaScript code that can't be run on the server. A common use case would be a user-specific dashboard page that is only relevant to that user and therefore doesn't need to be SEO. But, more commonly, there may be some sort of JavaScript that manipulates the DOM and therefore can't be run on the server because servers don't have a DOM.

Notes

Please be aware that when using getInitialProps and getServerSideProps that they are render blocking. Meaning, the page will not load until their code resolves/returns props. This has the unavoidable consequence of showing a blank page before the page loads. In summary, this could result in a slower TTI.

Upvotes: 105

Related Questions