Next.js 15: Streaming с useOptimistic и useActionState для динамических таблиц с пагинацией

[hannadev]

В Next.js 15 с React 19 динамические таблицы с пагинацией стали проще и быстрее благодаря streaming, useOptimistic и useActionState. Эти фичи решают классическую боль: задержки при загрузке данных, подвисания UI и плохие Web Vitals на больших таблицах. Мы разберём, как комбинировать их для реального DX.

Пагинация в таблицах часто превращается в тормоза из-за полного ререндера страницы. Streaming позволяет рендерить скелетоны сразу, а useOptimistic даёт мгновенный optimistic update. useActionState упрощает обработку форм и ошибок без лишнего бойлерплеита. В итоге получаем плавный UX даже на слабом соединении.

Streaming в Next.js 15: рендерим таблицу по кускам

Streaming в App Router - это киллер-фича для динамического контента. Вместо монолитного рендера сервера шлёт HTML по частям: сначала статический шелл, потом данные. В Next.js 15 это работает из коробки с loading.tsx и Suspense. Для таблиц с пагинацией это идеально: скелетон таблицы мигает на миг, а строки подгружаются асинхронно.

Представь таблицу заказов: 100+ строк, пагинация, фильтры. Без streaming пользователь видит белый экран 2-3 секунды. С loading.tsx статическая часть (хедеры, пагинация) летит первой, динамика - потом. React 19 усиливает это границами Suspense, где fallback - твой кастомный скелетон с shimmer-анимацией. DX огонь: меньше JS-бандла, лучше LCP.

• loading.tsx на уровне страницы: Автоматически оборачивает контент в Suspense. Импортируй <TableSkeleton /> - и готово.
• Компонентный Suspense: Оберни <PaginatedTable /> в <Suspense fallback={<SkeletonRows />} />. Данные фетчи внутри компонента.
• Плюсы для пагинации: Каждая страница таблицы стримится независимо, нет блокировок.

Сравнение рендера	Время LCP	JS-бандл	UX на мобильном
Без streaming	3.2с	150кб	Тормоза
С streaming	0.8с	80кб	Плавно

Нюанс: streaming работает только в Server Components. В Client - используй React.lazy.

useOptimistic: мгновенные обновления без ожидания сервера

useOptimistic из React 19 - это хук для optimistic UI в формах. Ты мутируешь стейт локально на клиенте, сервер потом подтверждает или откатывает. Для таблиц с пагинацией это must-have: добавил строку? Она появляется сразу, без спиннера. Next.js 15 интегрирует это с Server Actions идеально.

Допустим, таблица задач с пагинацией. Пользователь меняет статус задачи на “done”. useOptimistic обновляет строку в стейте мгновенно, серверная action асинхронно сохраняет в БД. Если ошибка - откат. Это решает фрустрацию от задержек API. В комбо со streaming таблица пагинируется без рефетча всей страницы.

Вот короткий пример на TS:

function TaskTable({ initialTasks }: { initialTasks: Task[] }) {
  const [optimisticTasks, addOptimistic] = useOptimistic(
    initialTasks,
    (state, newTask: Task) => [...state, newTask]
  );

  async function addTask(formData: FormData) {
    const task = { id: crypto.randomUUID(), ...Object.fromEntries(formData) };
    addOptimistic(task);
    await createTask(task); // Server Action
  }

  return <Table data={optimisticTasks} />;
}

• Синтаксис: useOptimistic(state, updateFn). updateFn получает текущий стейт + новое значение.
• Интеграция с формами: В action вызывай setter перед реальной логикой.
• Откат ошибок: Хук сам обрабатывает throw, возвращая исходный стейт.
• Для пагинации: Оптимистично добавляй/удаляй элементы в текущей странице.

Ключ: не мутируй оригинальный стейт - возвращай immutable копию.

useActionState: формы без лишнего стейта и спиннеров

useActionState - ещё один gem из React 19. Заменяет useFormStatus + ручной стейт для форм. Возвращает [state, action, isPending]. Идеально для пагинации таблиц: поиск, смена страницы, фильтры - всё в одной action. Next.js 15 делает Server Actions async по умолчанию, DX летает.

В таблице с пагинацией форма поиска. Было: useState для query, useFormStatus для спиннера, ручной рефетч. Теперь: одна action обрабатывает submit, useActionState даёт pending и ошибки. Таблица стримится заново только при успехе. Меньше кода, меньше багов.

Пример для пагинации:

import { useActionState } from 'react';

function PaginatedTable() {
  const [state, submit, pending] = useActionState(fetchPage, { data: [], error: null });

  return (
    <>
      <form action={submit}>
        <input name="page" type="number" />
        <button disabled={pending}>{pending ? 'Загрузка...' : 'Далее'}</button>
      </form>
      <Table data={state.data} />
    </>
  );
}

async function fetchPage(prev: any, formData: FormData) {
  const page = formData.get('page');
  const data = await db.query('SELECT * FROM users LIMIT 20 OFFSET $1', [(Number(page) - 1) * 20]);
  return { data };
}

• Триплет возврата: [state, dispatch, isPending] - всё, что нужно.
• Авто-рендер: pending триггерит ререндер с правильным UI.
• Ошибки в стейте: action кидает - state ловит как { error }.

useActionState vs старый подход	Код строк	Pending-хэндлинг	Ошибки
Старый	25+	useFormStatus	try/catch
Новый	10	Встроено	В стейте

Внимание: action должен быть async и принимать prevState.

Комбо: таблица мечты с пагинацией на стероидах

Соберём всё вместе: streaming + useOptimistic + useActionState. Получаем таблицу, где пагинация мгновенная, обновления optimistic, ошибки не ломают UX. В Next.js 15 это работает на проде без Turbopack - просто мигрируй.

Структура: page.tsx с loading.tsx, Table как Server Component с Suspense, Client-компонент с хуками для интерактива. Фильтры в форме с useActionState, добавление строк - useOptimistic. Web Vitals улетают в зелёный: CLS=0, FID<10мс. Код чистый, типизированный TS.

Готовый снippet для копипаста:

// app/users/page.tsx
async function UsersPage({ searchParams }: { searchParams: { page?: string } }) {
  const page = Number(searchParams.page ?? 1);
  const users = await db.getUsers(page);

  return <PaginatedUsers users={users} />;
}

export default UsersPage;

Почему это меняет правила игры в таблицах

Streaming с хуками React 19 делает динамические таблицы responsive как натив. Пагинация больше не bottleneck, optimistic UX убирает frustration. Но за кадром остались детали: интеграция с TanStack Table, caching в Next.js, edge-кейсы с infinite scroll. Если копать глубже - смотри на React Compiler для ещё большего буста.