NextJs Explanation on Ecommerce and Other Project Implementation [closed]

Question

I'm attempting to create a project to increase and enhance my coding skills, and I've lately migrated React to Nextjs. I've noticed that NextJs' main point or strength is rendering;

Could someone please explain the difference between Static Generation and Server Side Rendering and how they can be used in an e-commerce website, for example, by giving me a scenario? I've tried to learn through the NextJs documentation, but I seem to get the idea but don't fully understand what they're implying throughout the documentation.

Perhaps you could give me some website links and other resources to better understand how NextJs can affect the project; I'm working on benefits and drawbacks.

Which is better for performance? For example, this type of rendering is best for constantly changing data. It would be great to tell me an example of a scenario or model here.

I realize it's a lot, but I'm hoping you can assist me somehow. If you don't understand what I am trying to portray or need more clarification, please comment below if possible.

Answer 1

Serverside rendering renders the dynamic page on server side and sends the HTML to the browser upon each request, whereas static generation is done during compile time (i.e. when you build your code for production use) and the pages are stored in a permanent storage somewhere, like an S3 bucket and they're simply forwarded to the client when the client requests them.

Statically generated pages can be those whose information doesn't regularly change, like FAQ page, landing page etc. I'd recommend to use SSR for product pages for example since they do incorporate a ton of dynamic data (price changes, quantity etc).