Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Implementing Specific Part Loaders | Fetching and Displaying Data in Next.js
Next.js 14 Mastery for Building Modern Web Apps

bookImplementing Specific Part Loaders

Until now, we have been streaming entire pages. However, we can be more detailed by using React Suspense to stream specific components.

Suspense lets us delay showing parts of your app until a specific condition is met, like when data is loaded. Just wrap the dynamic components in Suspense and provide a temporary component to display while the dynamic part loads. To make this happen, move the data fetching into the component.

Back to the Project

Delete fetchIncome() and its data from app/dashboard/(overview)/page.tsx:

Import <Suspense> from React and wrap the <IncomeChart/> with it. We can pass a fallback component called <IncomeChartSkeleton>.

Finally, we should update the <IncomeChart> component to fetch its own data and remove the prop passed to it:

Now, refresh the live page; you should notice a skeleton loader on the chart place while data is loading.

In Practice

Important: We don't need to move the layout.tsx file to the (overview) folder as shown in the video.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 6

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.08

bookImplementing Specific Part Loaders

Свайпніть щоб показати меню

Until now, we have been streaming entire pages. However, we can be more detailed by using React Suspense to stream specific components.

Suspense lets us delay showing parts of your app until a specific condition is met, like when data is loaded. Just wrap the dynamic components in Suspense and provide a temporary component to display while the dynamic part loads. To make this happen, move the data fetching into the component.

Back to the Project

Delete fetchIncome() and its data from app/dashboard/(overview)/page.tsx:

Import <Suspense> from React and wrap the <IncomeChart/> with it. We can pass a fallback component called <IncomeChartSkeleton>.

Finally, we should update the <IncomeChart> component to fetch its own data and remove the prop passed to it:

Now, refresh the live page; you should notice a skeleton loader on the chart place while data is loading.

In Practice

Important: We don't need to move the layout.tsx file to the (overview) folder as shown in the video.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 6
some-alt