I am developing a Next.js e-commerce app with many pages, some of which are all-products page, specific product page, blog article page, profile page, cart page and many more. This app requires strong SEO, therefore I opted for Next.js, however, I do not have much experience with its data fetching options – SSR and SSG. I read many articles about SSR and SSG in Next.js, I am not sure if I understand it correctly though.
As I am new to this, I opted for getServerSideProps
for almost all of my pages that need to load content from a RESTful API before rendering. However, I came across an article that stated that the best option for the product page is to use getStaticProps
alongside with getStaticPaths
with fallback = true
and render a loading indicator if a certain page has not yet been pre-rendered. My app, however, changes data frequently, the database contains more than 10k products that are being removed, edited or added regularly. My first question is, whether the getStaticProps
and getStaticPaths
is a good option in this case. Will the product data be updated with every page view? Or do I need SSR for this? Customers always need to see the latest updates to the products. The same question goes for the all-products page, since it should only display products that are currently available and hide them as soon as they go out of stock.
My second question is about the deployment. I understand that if the app is built and exported statically, it can be deployed to static/shared hosting. However, if I use SSR in my app, I have to use a virtual server for hosting the app as far as I understand. Depending on the first question, what are the options for hosting such app?
Thank you very much for all your answers.
2
Answers
1. The getStaticProps and getStaticPaths is a good option for this case?
Ans.
getStaticProps
andgetStaticPaths
is a good option withIncremental Static Generation
for your case i.e e-commerce app.2. Will the product data be updated with every page view?
Ans. You can pre-render the product page again after some interval. Here’s how it works:
This approach is called Incremental Static Regeneration. To enable this, you can specify
revalidate
: 60 ingetStaticProps
3. Where to deploy the nextjs app ?
Ans. Next.js can be deployed to any hosting provider that supports Node.js and ofcourse database for storing products data and other CRUD operations.
For reference:
With getServerSideProps (SSR) data is fetched at request time, so your page will have a higher Time to first byte (TTFB), but will always pre-render pages with fresh data.
With Static Generation (SSG) The HTML is generated at build time and will be reused on each request, TTFB is slower and the page is usually faster, but you need to rebuild your app every time the data is updated (can be acceptable for a blog, but not for an e-commerce).
With Incremental Static Regeneration (ISG) static content can also be dynamic, the page will be rebuilt in the background with an interval-based HTTP request.
You can specify how often pages are updated with a
revalidate key
insidegetStaticProps
, this works great withfallback : true
and allows you to have (almost) always updated content :Caveats :
ISG is inspired by stale-while-revalidate, that means that if your pages have no visits for 1 year, even if your revalidate time is 1 second, the first user after 1 year will see 1 year old data so technically users will not always see updated data. See my answer about on-demand revalidation for more infos and resources.
next export
allows you to serve the website without a node enviroment on your server (it generates statics files), see this, but is not supported by ISG and SSR