Поток в NextJS

Не весь HTML страницы обязан ждать самый долгий запрос. NextJS может отправить браузеру готовую оболочку сразу, а медленный фрагмент догрузить позже. Для этого в React есть компонент Suspense: он показывает запасной вариант, пока дочерний асинхронный компонент не завершит работу.

Границу ставят прямо в page.jsx, рядом с основной разметкой. Файл loading.jsx здесь не нужен - он относится ко всему сегменту маршрута, а мы управляем только одним блоком внутри страницы.

Давайте вынесем медленный список в отдельную асинхронную функцию и обернем ее в Suspense с коротким fallback:

import { Suspense } from 'react';

async function RecentOrders() {
	let response = await fetch('https://jsonplaceholder.typicode.com/users');
	let users = await response.json();
	
	return (
		<ul>
			{users.map(function (user) {
				return <li key={user.id}>{user.name}</li>;
			})}
		</ul>
	);
}

export default function DashboardPage() {
	return (
		<div>
			<h1>Dashboard</h1>
			<p>Welcome back. Your summary is ready.</p>
			<Suspense fallback={<p>Loading orders...</p>}>
				<RecentOrders />
			</Suspense>
		</div>
	);
}

Покажите заголовок и приветствие сразу, а список новостей загрузите внутри границы с текстом ожидания на английском.

Вынесите медленный блок в отдельную асинхронную функцию в том же файле.