I would like to learn best approach to use SSR and CSR in React/NextJS. I watch a lot videos on Youtube about SSR and I learn the basics and theoretical knowledge about the theory of rendering.
Even if they are helpful, i did not see any case deeply linked to daily conditions.
Lets image we have 3 files. Dashboard page includes GeneralComponentInDashboard and FetchButtonComponent. GeneralComponentInDashboard has SubGenericComponentInGeneralComponent.
/dashboard/page.tsx
/Component/GeneralComponentInDashboard/page.tsx
Component/SubGenericComponentInGeneralComponent
Component/FetchButtonComponent
And also we use state management library (Redux, MobX etc, please share your suggestion)
The condition should be:
-
Initial data will be fetched from API while page loading. [It return array of models lets say [ [name: string, surname: string], …]. SSR.
-
When the user click the fetch button, new dataset will be set to array and display on GeneralComponentInDashboard without reloading page.
-
SubGenericComponentInGeneralComponent will be generic component as I sad, it takes only model (name: string, surname: string)
How should be the approach of building website with best performance in this popular scenario ? What page or component should be ‘use client’ and also where should be fetching operation ?
Additonally, I am open the suggestion of libraries to make process fast.
Thanks for your reply.
The condition should be:
-
Initial data will be fetched from API while page loading. [It return array of models lets say [ [name: string, surname: string], …]. SSR.
-
When the user click the fetch button, new dataset will be set to array and display on GeneralComponentInDashboard without reloading page.
-
SubGenericComponentInGeneralComponent will be generic component as I sad, it takes only model (name: string, surname: string)