next.js - Some NextJS questions regarding static/hybrid and SSR builds

Question

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?

Answer 1

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

2. 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.