I am building an e-commerce app.
using Version 13 (i think this is the main issue with documentation, i.e. knowing what is V13 documentation vs <=V12 is quite hard for a noob.
I come from an MVC background, but some of the terminology here is a little different.
What I am struggling with is understanding SSR (server side) vs CSR (client side) when using withAuthenticator or Authenticator or useEffect etc, forcing me to 'use client' at the top of my page.js/layout.js files

How do I structure my various pages and components to maintain as much server side as possible?
If I put Authentication in my top Layout.js versus lower down.
What should I do to create a more server side application?

e.g. I will have a products/[productId]/page.js
which will render up filtered and sorted products to authenticated and unauthenticated users, authenticated users getting more detail.
How do I structure that? should that whole page be CSR?

And is there a good guide for Amplify and V13 of next.js that I can use to guide myself into Auth and Data Query Data Create/Update.

Thank you for any help you can offer.