Данные на сервере: список и страница задачи

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

У двух экранов два главных вопроса: «какие задачи есть» и «что это за задача». Оба ответа живут в одном месте — lib/tasks.ts, — и ни один компонент не знает, что там внутри: база, файл или чужой сервис. Причина не в чистоте ради чистоты. В следующей статье эти же функции понадобятся действиям, а компонент, который сам собирает запрос к базе, придётся переписывать дважды.

ts

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

// в проекте здесь запрос к базе; задержка изображает её честно —
// настоящая выборка отвечает не в том же кадре, что и вызов
const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" },
  { id: "t3", title: "Прочитать главу", status: "done" }
];

function delay<T>(value: T, ms: number): Promise<T> {
  return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

// lib/tasks.ts — обе страницы спрашивают данные только отсюда
async function listTasks(): Promise<Task[]> {
  return delay(rows, 30);
}

// «такой задачи нет» — обычный ответ, а не исключение: что показать
// читателю, решает страница, а не слой данных
async function getTask(id: string): Promise<Task | undefined> {
  return delay(rows.find((task) => task.id === id), 30);
}

void (async () => {
  console.log((await listTasks()).length);
  console.log((await getTask("t2"))?.title);
  console.log(await getTask("t9"));
})();

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

// в проекте здесь запрос к базе; задержка изображает её честно —
// настоящая выборка отвечает не в том же кадре, что и вызов
const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" },
  { id: "t3", title: "Прочитать главу", status: "done" }
];

function delay<T>(value: T, ms: number): Promise<T> {
  return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

// lib/tasks.ts — обе страницы спрашивают данные только отсюда
async function listTasks(): Promise<Task[]> {
  return delay(rows, 30);
}

// «такой задачи нет» — обычный ответ, а не исключение: что показать
// читателю, решает страница, а не слой данных
async function getTask(id: string): Promise<Task | undefined> {
  return delay(rows.find((task) => task.id === id), 30);
}

void (async () => {
  console.log((await listTasks()).length);
  console.log((await getTask("t2"))?.title);
  console.log(await getTask("t9"));
})();

страница примера

Сначала предположите, что выведет код

Тип Task | undefined у getTask — не лень, а решение. Отсутствие задачи здесь ожидаемо: читатель мог открыть старую ссылку. Исключение приберегают для того, что не должно происходить, — упавшей базы, битого ответа. Разницу между «нет данных» и «всё сломалось» вы уже размечали типами в части III, и она никуда не делась.

Вопрос экрана	Функция	Что возвращает
Какие задачи на доске	`listTasks()`	`Task[]` — пустой массив тоже ответ
Что за задача по этому адресу	`getTask(id)`	`Task \| undefined`
Что с задачей происходило	`listEvents(id)`	`TaskEvent[]`, но заметно медленнее

Третья функция понадобится в разделе про медленную часть: она попала в проект именно потому, что тормозит.

Страница доски — серверный компонент со словом async, и больше в нём ничего необычного нет. Что делает с ним сервер, вы разбирали в статье «Данные прямо в компоненте»: зовёт как обычную функцию и ждёт промис. Проделаем это руками — и отрисуем то, что сервер получил на руки.

tsx

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

const columns: { status: Status; title: string }[] = [
  { status: "todo", title: "Сделать" },
  { status: "doing", title: "В работе" },
  { status: "done", title: "Готово" }
];

const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" },
  { id: "t3", title: "Прочитать главу", status: "todo" }
];

async function listTasks(): Promise<Task[]> {
  return new Promise((resolve) => setTimeout(() => resolve(rows), 30));
}

// app/board/page.tsx (в файле перед именем стоит export default)
async function BoardPage() {
  const tasks = await listTasks();
  return (
    <div>
      {columns.map((column) => (
        <section key={column.status}>
          <h2>{column.title}</h2>
          <ul>
            {tasks
              .filter((task) => task.status === column.status)
              .map((task) => (
                <li key={task.id}>{task.title}</li>
              ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

// ровно то, что делает сервер: позвать, дождаться, превратить в разметку
void (async () => {
  const element = await BoardPage();
  console.log(element.type);
  ReactDOM.createRoot(document.getElementById("root")!).render(element);
})();

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

const columns: { status: Status; title: string }[] = [
  { status: "todo", title: "Сделать" },
  { status: "doing", title: "В работе" },
  { status: "done", title: "Готово" }
];

const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" },
  { id: "t3", title: "Прочитать главу", status: "todo" }
];

async function listTasks(): Promise<Task[]> {
  return new Promise((resolve) => setTimeout(() => resolve(rows), 30));
}

// app/board/page.tsx (в файле перед именем стоит export default)
async function BoardPage() {
  const tasks = await listTasks();
  return (
    <div>
      {columns.map((column) => (
        <section key={column.status}>
          <h2>{column.title}</h2>
          <ul>
            {tasks
              .filter((task) => task.status === column.status)
              .map((task) => (
                <li key={task.id}>{task.title}</li>
              ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

// ровно то, что делает сервер: позвать, дождаться, превратить в разметку
void (async () => {
  const element = await BoardPage();
  console.log(element.type);
  ReactDOM.createRoot(document.getElementById("root")!).render(element);
})();

страница примера

Сначала предположите, что выведет код

Ни состояния, ни эффекта, ни ветки «пока грузится». Раскладка по колонкам — обычный filter внутри map, потому что данные уже на руках: сервер сначала дождался их, и только потом начал собирать элементы. И key здесь — task.id, а не индекс: задачи будут переезжать между колонками, а с индексом React перепутает карточки (об этом была статья про списки в разметке).

Карточку из li в проекте выносят в отдельный компонент — и вот тут начинается то, чего в части II не было вовсе. Пропсы проверяются на сборке, а не при клике.

tsx

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

interface TaskCardProps {
  task: Task;
  href: string;
}

function TaskCard({ task, href }: TaskCardProps) {
  return (
    <a href={href}>
      {task.title} — {task.status}
    </a>
  );
}

const task: Task = { id: "t1", title: "Сверстать доску", status: "todo" };

const first = <TaskCard task={task.title} href={"/board/" + task.id} />;

const second = <TaskCard task={task} />;

console.log(first.props.href);
console.log(second.type === TaskCard);

страница примера

Сначала предположите, что выведет код

Две диагностики — и обе про то, что раньше выяснялось на живом экране. В доске из части II карточка собиралась строкой, и опечатка в имени поля давала undefined в разметке: пустая строчка вместо заголовка, и ищи, откуда. Здесь компилятор называет и место, и причину.

Вторая диагностика говорит о «свойстве, которого нет в типе», и это не оговорка: <TaskCard task={task} /> компилируется в вызов функции с объектом пропсов, так что забытый href — ровно недостающее свойство объекта.

Адрес карточки — /board/t2, файл — app/board/[id]/page.tsx. Значение сегмента приходит пропсом params, и с Next 15 это промис, а не объект: об этом была статья «Динамические сегменты и асинхронные params». Написать по привычке params.id легко, и вот что на это скажет компилятор.

tsx

interface Task {
  id: string;
  title: string;
}

// в проекте это import { getTask } from "@/lib/tasks";
declare function getTask(id: string): Promise<Task | undefined>;

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

// app/board/[id]/page.tsx
async function TaskPage({ params }: TaskPageProps) {
  const task = await getTask(params.id);
  return <h1>{task?.title}</h1>;
}

console.log(typeof TaskPage);

страница примера

Сначала предположите, что выведет код

Ошибка эта живучая: без объявленного типа пропсов она дожила бы до запуска и обернулась загадочным undefined в запросе к базе — искать пришлось бы по логам. С типом на неё уходит одна строка диагностики на сборке.

С await всё встаёт на места. Соберём страницу целиком и позовём её так, как позовёт Next.

tsx

interface Task {
  id: string;
  title: string;
  status: string;
}

const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" }
];

async function getTask(id: string): Promise<Task | undefined> {
  return new Promise((resolve) =>
    setTimeout(() => resolve(rows.find((task) => task.id === id)), 30)
  );
}

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

// app/board/[id]/page.tsx
async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  return (
    <article>
      <h1>{task?.title ?? "Задача не найдена"}</h1>
    </article>
  );
}

// Next передаёт params промисом — соберём такой же и позовём страницу
void (async () => {
  const element = await TaskPage({ params: Promise.resolve({ id: "t2" }) });
  console.log(element.props.children.props.children);
  ReactDOM.createRoot(document.getElementById("root")!).render(element);
})();

страница примера

Сначала предположите, что выведет код

Два await подряд здесь не образуют водопада: первый ждёт не сеть, а фреймворк, второй — базу. Но стоит добавить третий, за лентой событий, и получится водопад из статьи про await в компоненте: страница подождёт сумму, а не самое долгое. Проверка простая — зависит ли следующий запрос от предыдущего. За событиями задачи нужен id, а он приходит из адреса, не из базы, значит оба запроса могут стартовать рядом.

Next хочет начать сборку страницы до того, как узнает значения сегментов, — тогда общую для всех адресов часть можно отдать заранее, а подставить конкретный id позже. Синхронное свойство такой отсрочки не допускает, промис допускает. Отсюда же searchParams: он тоже асинхронный и по той же причине.

Строка task?.title ?? "Задача не найдена" из прошлого раздела — заглушка, и плохая: страница ответит кодом 200, поисковик проиндексирует несуществующую задачу, а читатель получит карточку-призрак с пустыми полями. Правильный ответ — notFound(). У него неожиданный побочный эффект: он чинит не только код ответа, но и типы.

ts

interface Task {
  id: string;
  title: string;
}

// в проекте это import { notFound } from "next/navigation";
// важен не текст ошибки, а тип: never значит «отсюда не возвращаются»
function notFound(): never {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

const rows: Task[] = [{ id: "t1", title: "Сверстать доску" }];

function findTask(id: string): Task | undefined {
  return rows.find((task) => task.id === id);
}

function titleOf(id: string): string {
  const task = findTask(id);
  if (!task) notFound();
  return task.title;
}

// та же пара строк, но у функции обычный тип возврата
function nothingFound(): void {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

function brokenTitleOf(id: string): string {
  const task = findTask(id);
  if (!task) nothingFound();
  return task.title;
}

console.log(titleOf("t1"));
console.log(typeof brokenTitleOf);

страница примера

Сначала предположите, что выведет код

Диагностика ровно одна, и она во второй половине. Обе функции бросают исключение одинаково, но компилятор читает не тела, а сигнатуры: never — обещание никогда не вернуть управление, и после такого вызова ветка task === undefined считается недостижимой. У void такого обещания нет, поэтому task.title остаётся опасным. Тип never вы разбирали в части III как «значения не бывает» — вот его самое практичное применение.

Сужение опирается на явно написанный тип и придирчиво к форме: у объявления function хватает «: never» в сигнатуре, а у стрелки в const аннотацию нужно ставить на саму переменную. Выведенный never не считается.

Теперь то же самое в странице. Файл app/board/[id]/not-found.tsx Next покажет сам, поймав служебную ошибку; ниже эта его работа расписана вручную, чтобы было видно, кто кого ловит.

tsx

interface Task {
  id: string;
  title: string;
}

const rows: Task[] = [{ id: "t1", title: "Сверстать доску" }];

function notFound(): never {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

async function getTask(id: string): Promise<Task | undefined> {
  return rows.find((task) => task.id === id);
}

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

// app/board/[id]/page.tsx
async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  if (!task) notFound();
  return <h1>{task.title}</h1>;
}

// app/board/[id]/not-found.tsx
function TaskNotFound() {
  return <p>Такой задачи нет</p>;
}

// а это работа Next: своя ошибка — свой экран, чужая летит дальше
async function serve(id: string) {
  try {
    return await TaskPage({ params: Promise.resolve({ id }) });
  } catch (err) {
    const message = (err as Error).message;
    if (message.startsWith("NEXT_HTTP_ERROR_FALLBACK;404")) return <TaskNotFound />;
    throw err;
  }
}

void (async () => {
  const found = await serve("t1");
  const missing = await serve("t9");
  console.log(found.props.children);
  console.log(missing.type === TaskNotFound);
  ReactDOM.createRoot(document.getElementById("root")!).render(missing);
})();

interface Task {
  id: string;
  title: string;
}

const rows: Task[] = [{ id: "t1", title: "Сверстать доску" }];

function notFound(): never {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

async function getTask(id: string): Promise<Task | undefined> {
  return rows.find((task) => task.id === id);
}

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

// app/board/[id]/page.tsx
async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  if (!task) notFound();
  return <h1>{task.title}</h1>;
}

// app/board/[id]/not-found.tsx
function TaskNotFound() {
  return <p>Такой задачи нет</p>;
}

// а это работа Next: своя ошибка — свой экран, чужая летит дальше
async function serve(id: string) {
  try {
    return await TaskPage({ params: Promise.resolve({ id }) });
  } catch (err) {
    const message = (err as Error).message;
    if (message.startsWith("NEXT_HTTP_ERROR_FALLBACK;404")) return <TaskNotFound />;
    throw err;
  }
}

void (async () => {
  const found = await serve("t1");
  const missing = await serve("t9");
  console.log(found.props.children);
  console.log(missing.type === TaskNotFound);
  ReactDOM.createRoot(document.getElementById("root")!).render(missing);
})();

страница примера

Сначала предположите, что выведет код

Обратите внимание, где стоит вызов: в странице, а не в getTask. Соблазн спрятать его в слой данных велик — одной строкой на все места, — но слой данных зовут и действия из следующей статьи, а там 404 не при чём: форма должна получить внятную ошибку, а не редирект на «не найдено». И вторая причина — ловушка с try..catch из статьи про not-found.tsx: обёрнутый в catch вызов notFound() превращается в обычную пойманную ошибку, и 404 не случается.

Где зовут notFound()	Что получится
В странице, после проверки результата	404 и `not-found.tsx` — то, что нужно
В `lib/tasks.ts`, внутри выборки	действие из формы тоже улетит в 404 вместо сообщения об ошибке
Внутри своего `try..catch`	служебная ошибка попадёт в ваш `catch`, страница ответит 200

У задачи есть лента событий: кто создал, кто перенёс, когда закрыли. Лежит она отдельно и отвечает медленно — пусть будет 300 мс против 30 у самой задачи. Написать напрашивается вот так.

tsx

interface Task {
  id: string;
  title: string;
}

interface TaskEvent {
  id: string;
  text: string;
}

declare function getTask(id: string): Promise<Task | undefined>;
declare function listEvents(id: string): Promise<TaskEvent[]>;

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

// так делать не надо: страница ждёт обоих, значит ждёт медленного
async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const [task, events] = await Promise.all([getTask(id), listEvents(id)]);
  return (
    <article>
      <h1>{task?.title}</h1>
      <ul>
        {events.map((event) => (
          <li key={event.id}>{event.text}</li>
        ))}
      </ul>
    </article>
  );
}

console.log(typeof TaskPage);

страница примера

Сначала предположите, что выведет код

Promise.all здесь не спасает: водопада действительно нет, оба запроса идут рядом, — но await всё равно стоит выше разметки, и до его конца в браузер не уходит ни байта. Заголовок был готов через 30 мс и всё равно прождал все 300. Лечится это не ускорением ленты, а переносом ожидания вниз: пусть ждёт тот, кто её показывает.

tsx

interface Task {
  id: string;
  title: string;
}

interface TaskEvent {
  id: string;
  text: string;
}

declare function getTask(id: string): Promise<Task | undefined>;
declare function listEvents(id: string): Promise<TaskEvent[]>;

interface ActivityProps {
  id: string;
}

// отдельный серверный компонент со своим await — вот его и подождут
async function Activity({ id }: ActivityProps) {
  const events = await listEvents(id);
  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  return (
    <article>
      <h1>{task?.title}</h1>
      <React.Suspense fallback={<p>Загружаем историю…</p>}>
        <Activity id={id} />
      </React.Suspense>
    </article>
  );
}

console.log(typeof TaskPage);

страница примера

Сначала предположите, что выведет код

Граница стоит выше await ленты и ниже await задачи — именно поэтому она работает. Что при этом видит читатель, посмотрим в кадре. Прикиньте заранее, что окажется на экране на сотой миллисекунде.

tsx

interface TaskEvent {
  id: string;
  text: string;
}

// в песочнице async-компоненту не смонтироваться, поэтому ожидание
// изображает use(): граница ведёт себя одинаково на сервере и в браузере
const eventsPromise = new Promise<TaskEvent[]>((resolve) =>
  setTimeout(
    () => resolve([{ id: "e1", text: "создана" }, { id: "e2", text: "взята в работу" }]),
    300
  )
);

const root = document.getElementById("root")!;

function Activity() {
  const events = React.use(eventsPromise);
  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

function TaskPage() {
  return (
    <article>
      <h1>Написать рендер</h1>
      <React.Suspense fallback={<p>Загружаем историю…</p>}>
        <Activity />
      </React.Suspense>
    </article>
  );
}

ReactDOM.createRoot(root).render(<TaskPage />);

// заглядываем в кадр на сотой миллисекунде и ещё раз — когда лента приехала
setTimeout(() => console.log("на 100 мс:", root.textContent), 100);
void eventsPromise.then(() =>
  setTimeout(() => console.log("после ответа:", root.textContent), 50)
);

interface TaskEvent {
  id: string;
  text: string;
}

// в песочнице async-компоненту не смонтироваться, поэтому ожидание
// изображает use(): граница ведёт себя одинаково на сервере и в браузере
const eventsPromise = new Promise<TaskEvent[]>((resolve) =>
  setTimeout(
    () => resolve([{ id: "e1", text: "создана" }, { id: "e2", text: "взята в работу" }]),
    300
  )
);

const root = document.getElementById("root")!;

function Activity() {
  const events = React.use(eventsPromise);
  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

function TaskPage() {
  return (
    <article>
      <h1>Написать рендер</h1>
      <React.Suspense fallback={<p>Загружаем историю…</p>}>
        <Activity />
      </React.Suspense>
    </article>
  );
}

ReactDOM.createRoot(root).render(<TaskPage />);

// заглядываем в кадр на сотой миллисекунде и ещё раз — когда лента приехала
setTimeout(() => console.log("на 100 мс:", root.textContent), 100);
void eventsPromise.then(() =>
  setTimeout(() => console.log("после ответа:", root.textContent), 50)
);

страница примера

Сначала предположите, что выведет код

Заголовок оказался на экране сразу и остался на месте — его не перерисовало и не мигнуло. Подменилась только та часть, что стояла внутри границы. На сервере то же самое происходит с ответом: оболочка с заголовком уходит первым куском, лента дошлётся вторым, и читатель успевает прочитать название задачи, пока история ещё в пути.

Цена решения — код ответа. Он уходит с первым куском, поэтому notFound() внутри Activity уже не сделает 404: страница ответит 200 и просто покажет «не найдено» в теле.

Если по событиям нужно кликать — сворачивать, фильтровать, — Activity становится клиентским, а async в клиентском компоненте не бывает. Тогда промис не дожидаются в странице, а передают вниз пропсом: серверный компонент начинает работу, клиентский её ждёт через use(). Промис — одно из немногого, что через границу проходит; список того, что можно передавать, был в статье «Что можно передать через границу».

tsx

interface TaskEvent {
  id: string;
  text: string;
}

// id тут не нужен — заглушка отвечает одним и тем же; в проекте по нему выборка
function listEvents(id: string): Promise<TaskEvent[]> {
  return new Promise((resolve) =>
    setTimeout(
      () => resolve([{ id: "e1", text: "создана" }, { id: "e2", text: "взята в работу" }]),
      300
    )
  );
}

interface ActivityProps {
  events: Promise<TaskEvent[]>;
}

// "use client" — этот файл уезжает в браузер, поэтому ждёт через use()
function Activity({ events }: ActivityProps) {
  const list = React.use(events);
  return (
    <ul>
      {list.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

// в серверной странице запрос стартует без await и уходит вниз пропсом
const started = listEvents("t2");

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.Suspense fallback={<p>Загружаем историю…</p>}>
    <Activity events={started} />
  </React.Suspense>
);

страница примера

Сначала предположите, что выведет код

Оба экрана целиком — это пять файлов, и ни в одном нет ни useState, ни useEffect.

Файл	Что в нём	Чего ждёт
`lib/tasks.ts`	`listTasks`, `getTask`, `listEvents`	ничего не рисует — только отвечает
`app/board/page.tsx`	доска: колонки и карточки	`listTasks()`
`app/board/[id]/page.tsx`	карточка задачи и граница вокруг ленты	`params` и `getTask(id)`
`app/board/[id]/not-found.tsx`	экран «такой задачи нет»	ничего: он готов заранее
`app/board/[id]/loading.tsx`	заглушка на время перехода	показывается, пока ждёт страница

Последняя строка — та самая обёртка из главы про App Router: loading.tsx подменяет содержимое сегмента, пока страница ждёт свои 30 мс, а Suspense внутри страницы отвечает за ленту. Два разных ожидания, две разные заглушки, и путать их не надо: одно про переход на адрес, другое про кусок разметки.

Всё это — чтение. Кнопки «добавить» на доске пока нет, статус карточки не меняется, форма ничего не отправляет: изменения приходят в следующей статье, вместе с действиями. А то, что данные при каждом заходе спрашиваются заново, — тема главы про кеш; пока это ровно то поведение, которое нужно, чтобы видеть свои же правки.

Вопросы к данным живут в lib/tasks.ts, а не в компонентах: те же функции понадобятся действиям из следующей статьи.
Обе страницы — async-компоненты: сервер зовёт их как обычные функции, ждёт промис и превращает результат в разметку.
params приходит промисом, и забытый await ловится компилятором, а не загадочным undefined в запросе.
notFound() объявлен как never — он даёт и честный 404, и сужение Task | undefined до Task в остальной разметке.
Границу Suspense ставят выше await медленной части: ожидание переезжает в отдельный компонент, оболочка уходит первым куском.
Пока это только чтение: изменения, формы и действия — тема следующей статьи главы.

1/4В странице задачи написано: const task = await getTask(id); if (!task) notFound(); return <h1>{task.title}</h1>. Почему компилятор молчит на task.title, хотя getTask возвращает Task | undefined?

2/4Заголовок задачи готов через 30 мс, лента событий — через 2 секунды. В странице стоит const events = await listEvents(id), а разметка ленты обёрнута в <Suspense>. Когда читатель увидит заголовок?

3/4В app/board/[id]/page.tsx написано const task = await getTask(params.id). Что будет?

4/4Где в проекте уместно позвать notFound()?

Отпустить заголовок

Страница ждёт ленту событий, хотя показывать её сразу необязательно. Перепишите так, чтобы заголовок уходил в браузер, не дожидаясь ленты: ожидание должно оказаться под границей, а не над ней.

tsx

interface Task {
  id: string;
  title: string;
}

interface TaskEvent {
  id: string;
  text: string;
}

declare function getTask(id: string): Promise<Task | undefined>;
declare function listEvents(id: string): Promise<TaskEvent[]>;

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  // из-за этой строки заголовок ждёт вместе с лентой
  const events = await listEvents(id);
  return (
    <article>
      <h1>{task?.title}</h1>
      <ul>
        {events.map((event) => (
          <li key={event.id}>{event.text}</li>
        ))}
      </ul>
    </article>
  );
}

console.log(typeof TaskPage); // function

страница примера

Сначала предположите, что выведет код

Ожидание переезжает в отдельный компонент, а на его место в странице встаёт граница с заглушкой. Страница теперь ждёт только задачу.

tsxлистинг · не запускается

interface ActivityProps {
  id: string;
}

async function Activity({ id }: ActivityProps) {
  const events = await listEvents(id);
  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  return (
    <article>
      <h1>{task?.title}</h1>
      <Suspense fallback={<p>Загружаем историю…</p>}>
        <Activity id={id} />
      </Suspense>
    </article>
  );
}

interface ActivityProps {
  id: string;
}

async function Activity({ id }: ActivityProps) {
  const events = await listEvents(id);
  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.text}</li>
      ))}
    </ul>
  );
}

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  return (
    <article>
      <h1>{task?.title}</h1>
      <Suspense fallback={<p>Загружаем историю…</p>}>
        <Activity id={id} />
      </Suspense>
    </article>
  );
}

Обёртка вокруг ul прямо в странице не помогла бы: await остался бы выше границы, а граница действует только на то, что внутри неё.

404 вместо карточки-призрака

Страница показывает заглушку вместо отсутствующей задачи и отвечает кодом 200. Замените заглушку на notFound() — и обратите внимание, что после этого станет с вопросительными знаками в разметке.

tsx

interface Task {
  id: string;
  title: string;
  status: string;
}

declare function getTask(id: string): Promise<Task | undefined>;

interface TaskPageProps {
  params: Promise<{ id: string }>;
}

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  return (
    <article>
      <h1>{task?.title ?? "Задача не найдена"}</h1>
      <p>{task?.status ?? "—"}</p>
    </article>
  );
}

console.log(typeof TaskPage); // function

страница примера

Сначала предположите, что выведет код

Одна проверка вместо двух заглушек, и разметка становится прямой: task ниже вызова сужен до Task, поэтому ?. и ?? больше не нужны.

jsлистинг · не запускается

import { notFound } from "next/navigation";

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  if (!task) notFound();
  return (
    <article>
      <h1>{task.title}</h1>
      <p>{task.status}</p>
    </article>
  );
}

import { notFound } from "next/navigation";

async function TaskPage({ params }: TaskPageProps) {
  const { id } = await params;
  const task = await getTask(id);
  if (!task) notFound();
  return (
    <article>
      <h1>{task.title}</h1>
      <p>{task.status}</p>
    </article>
  );
}

Рядом кладётся app/board/[id]/not-found.tsx с человеческим экраном и ссылкой на доску. Заворачивать вызов в try..catch нельзя: свой catch перехватит служебную ошибку раньше Next.

Три похода вместо одного

Доска зовёт базу по разу на колонку — и делает это последовательно, потому что каждый await ждёт предыдущего. Переделайте на один запрос за всеми задачами и раскладку по колонкам на месте.

ts

type Status = "todo" | "doing" | "done";

interface Task {
  id: string;
  title: string;
  status: Status;
}

const rows: Task[] = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" },
  { id: "t3", title: "Прочитать главу", status: "todo" }
];

let trips = 0;

async function listByStatus(status: Status): Promise<Task[]> {
  trips += 1;
  return new Promise((resolve) =>
    setTimeout(() => resolve(rows.filter((task) => task.status === status)), 100)
  );
}

void (async () => {
  const started = Date.now();
  const todo = await listByStatus("todo");
  const doing = await listByStatus("doing");
  const done = await listByStatus("done");
  const spent = Math.round((Date.now() - started) / 100) * 100;
  console.log(todo.length, doing.length, done.length); // 2 1 0
  console.log(trips, spent); // 3 300, а нужен один поход и втрое меньше времени
})();

страница примера

Сначала предположите, что выведет код

Колонок на доске три, а вопрос у них один — «какие вообще есть задачи». Один запрос, дальше filter по уже полученному массиву.

jsлистинг · не запускается

async function listTasks(): Promise<Task[]> {
  trips += 1;
  return new Promise((resolve) => setTimeout(() => resolve(rows), 100));
}

void (async () => {
  const started = Date.now();
  const tasks = await listTasks();
  const byStatus = (status: Status) => tasks.filter((task) => task.status === status);
  console.log(byStatus("todo").length, byStatus("doing").length, byStatus("done").length); // 2 1 0
  console.log(trips, Math.round((Date.now() - started) / 100) * 100); // 1 100
})();

async function listTasks(): Promise<Task[]> {
  trips += 1;
  return new Promise((resolve) => setTimeout(() => resolve(rows), 100));
}

void (async () => {
  const started = Date.now();
  const tasks = await listTasks();
  const byStatus = (status: Status) => tasks.filter((task) => task.status === status);
  console.log(byStatus("todo").length, byStatus("doing").length, byStatus("done").length); // 2 1 0
  console.log(trips, Math.round((Date.now() - started) / 100) * 100); // 1 100
})();

Если запросы по колонкам всё же нужны — например, каждая колонка со своей постраничной выборкой, — их хотя бы не выстраивают в очередь: Promise.all отправит все три разом, и доска подождёт самый долгий, а не сумму.

Данные на сервере: список и страница задачи

Видеоразбор темы за 5–7 минут

Слой данных: по функции на вопросОдин модуль, из которого спрашивают обе страницы

Доска: страница ждёт, сервер зовётasync-компонент, колонки и живая проверка пропсов

Страница задачи: params приезжает промисомДинамический сегмент, await params и цена забытого слова

Задачи нет: notFound() и тип neverОдин вызов убирает и заглушку в разметке, и «возможно undefined»

Медленная часть под SuspenseЗаголовок в первом куске, история задачи — следом

Что где лежитПять файлов и кто из них чего ждёт

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Отпустить заголовок

404 вместо карточки-призрака

Три похода вместо одного