Til nå har vi strømmet hele sider. Vi kan imidlertid være mer detaljerte ved å bruke React Suspense for å strømme spesifikke komponenter.

Suspense lar oss utsette visningen av deler av appen til en bestemt betingelse er oppfylt, for eksempel når data er lastet inn. Bare pakk de dynamiske komponentene inn i Suspense og oppgi en midlertidig komponent som vises mens den dynamiske delen lastes inn. For å få dette til, flytt datainnhentingen inn i komponenten.

Tilbake til prosjektet

Slett fetchIncome() og tilhørende data fra app/dashboard/(overview)/page.tsx:

Importer <Suspense> fra React og pakk inn <IncomeChart/> med den. Vi kan sende inn en fallback-komponent kalt <IncomeChartSkeleton>.

Til slutt bør vi oppdatere <IncomeChart>-komponenten slik at den henter sine egne data og fjerner propen som ble sendt til den:

Oppdater nå den levende siden; du bør se en skjelettlaster der diagrammet vises mens dataene lastes inn.

I praksis

Viktig: Vi trenger ikke å flytte layout.tsx-filen til (overview)-mappen slik det vises i videoen.