CODEWITHSUNDEEP
next.js
james emanon
james emanon

Reputation: 11807

Some NextJS questions regarding static/hybrid and SSR builds

So, I am new to NextJS and I understand, to some degree, the usages of getStaticProps, getServerSideProps etc... but, there are nuances of use cases that I am not wrapping my head around. I am hoping given the conditions below you could tell me what type of generation to use.

Product Page: --- Most of it is retrieved by products ids and the data doesn't change much --- there is some "dynamic content" but its minor. Like a % discount applied given some conditions?

which?

HomePage: --- mostly all static.. ie reviews/ product info etc.. BUT --- has a header (that shows on all pages) that shows users name IF they are logged in. Which?

Upvotes: 1

Views: 347

Answers (2)

dmudro
dmudro

Reputation: 3104

I recommend understanding getStaticProps vs getServerSideProps on the fundamental level.

Sounds more complicated than it is. A simple rule is asking yourself:

  1. do I want to to have the particular page generated at build time each time the content is changed? That means your CI server builds the page, I. e. your Vercel, AWS Amplify, GitHub actions, GitLab Pipelines, etc. regenerates the static page with each content change. use getStaticProps.

or

  1. do I want to have the page generated in real time on each browser request by the web server? use getServerSideProps.

It's a trade off between great performance (build time) and content freshness (real time).

Next.js' strategy is to move as much rendering to static (build time) and subsequently refresh relevant content as required in a smart way. This is where the revalidate option comes in and a product page is a textbook use case here.

Upvotes: 2

cuongdevjs
cuongdevjs

Reputation: 731

I think on both pages you should use getStaticProps. In this case 1: you use getStaticPaths to export all production pages by id. With your requirement data don't change regularly on Product page, you can use revalidate property to update to content or rebuild the project.

references on here: https://nextjs.org/docs/basic-features/data-fetching

Upvotes: 1

Related Questions