NextJS Multiple Components fetching data and using fetched data from other components

  Kiến thức lập trình

I am looking for an advice for a design pattern for a page in NextJS.

The whole page is SSR and contains multiple components which fetch data from the postgresql DB and some expternal APIs on a server side. All of these components on the page are within Suspense boundaries in order to show the Skeleton as a UI placeholder to the user when data is being loaded.

Some of these components fetch and display data as values or in a table, but some of them compute KPIs based on their own fetched data and data fetched by other components.

How can I exchange data between components and still keep my Suspense framework?

I was considering 3 options:

  1. Load all data consecutively on the main page.tsx and propagate it to components by props. In this case I will not need the Suspense for separate Components but one for the entire page
  2. As an extension of 1. use Context Provider to wrap the whole thing and skip data propagation to children Components by props
  3. Use State Managment library like Redux or Zustand and update the global state of this page with data from all the components one by one, after they were sucessully fetched. Components relying on their own fetched data would render first, and only then those which rely on data from those other components. Would that make some of the components Client Side Rendered then? Or can I still keep it all rendered in order on the server side?

Is it a right use case to use State Management library at all?

LEAVE A COMMENT