Я работаю старшим фронтенд-разработчиком в it-отделе одного из крупнейших федеральных застройщиков. Специфика разработки в такой непрофильной компании — сроки спускаемые сверху и вообще не имеющие корреляции с реальными ресурсами и возможностями команды. Именно поэтому мы работаем очень быстро, постоянно пытаясь получить (максимум результата)*3 за (минимум времени)/4.

В этих условиях мы делали большие интеграции с headless CMS Directus и непосредственно с бекендом, используя моковые данные на фронте.
Интеграции были большие и быстрые — и вот тут-то и стало видно, что большинство фронтенд-разработчиков не очень понимают, как подготовить интеграцию, чтобы потом было быстро и не больно заменять моки на реальные ответы. В этой статье пойдет речь о таких подходах на фронтенде,

Подготовка к интеграции

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

Что в этом случае делает фронтендер? 

1. Самый простой случай — верстаем компоненты и встраиваем данные в верстку

Фронтендер берет макеты, верстает, встраивая данные строками/числами и т. д. непосредственно в верстку. Очень странно, но даже опытные разработчики используют такой метод. 

Выглядит это так

// page.tsx
import React from 'react';
import { RootComponent } from '@/app/MockExample/1/_components/RootComponent';

export default async function MockExample() {
  return (
    <>
      <h1>Отличное начало</h1>
      <RootComponent />
      <div>Но финал может быть грустным</div>
    </>
  );
}


// RootComponent.tsx
import { NewsList } from '../NewsList';
import styles from './RootComponent.module.scss';

export const RootComponent = () => {
  return (
    <div className={styles.RootComponentContainer}>
      <h2>Новости</h2>
      <div className={styles.dateWrapper}>
        Дата обновления: <span className={styles.date}>20 сентября 2025</span>
      </div>
      <NewsList />
    </div>
  );
};


// NewsList.tsx
import { NewsItem } from '@/app/MockExample/2/_components/NewsItem';
import styles from './NewsList.module.scss';

export const NewsList = () => {
  const data = new Array(5).fill(true);

  return (
    <div className={styles.Component1Container}>
      <div>Новоости предоставлены агетством Rei</div>
      {data.map((_, index) => (
        <NewsItem key={'newsItem'+index} />
      ))}

      <div>Список авторов:</div>

      <ul>
        {data.map((_, index) => (
          <div className={styles.author} key={'author'+index}>
            Киселев Д.К.
          </div>
        ))}
      </ul>
    </div>
  );
};

//NewsItem.tsx
import styles from './NewsItem.module.scss';

export const NewsItem = () => {
  return (
    <div className={styles.NewsItemContainer}>
      <h3>Новость №1</h3>
      <div className={styles.tags}>Hit!</div>
      <h3>Убийство во Восточном экспрессе</h3>
      <div className={styles.date}>1933</div>
      <img src={'./mockImage'} alt={'Обложка'} />
      <div>Комментариев: 5</div>
      <div>Понравилось: 5</div>
    </div>
  );
};

А между тем, минусы у него очень большие:

• при такой верстке никто не заморачивается делать различные виды данных — делают просто один вариант, соответственно все ошибки не показанных различий состояний останутся на пост-интеграцию

• есть большие риски при интеграции пропустить какие-то поля и оставить их моками - в особенности если компоненты сложные и разбиты на более мелкие

• поскольку данные разбросаны по компонентам, у фронтендера нет полной картины, какие данные понадобятся и в какие структуры их лучше организовать

• нет готового ответа на вопрос бека, какие данные ему тут нужны. А этот ответ бывает очень полезен — т. к. в этом случае у вас есть готовый контракт, который вы отдаете беку. В большинстве случаев бек вернет вам именно его и это минимизирует вашу работу при интеграции.

Плюсов в этом подходе не вижу.

2. Данные заданы объектом в самих компонентах (и корневых, и дочерних)

В этом случае разработчик задает объекты/массивы данных тут же в компоненте и уже их использует в верстке.

// page.tsx
import React from 'react';
import { RootComponent } from '@/app/MockExample/2/_components/RootComponent';

export default async function MockExample() {
  const data = {
    title: 'Отличное начало',
    comment: 'Но финал может быть грустным',
  };

  const { title, comment } = data;

  return (
    <>
      <h1>{title}</h1>
      <RootComponent />
      <div>{comment}</div>
    </>
  );
}

// RootComponent.tsx
import { NewsList } from '../NewsList';
import styles from './RootComponent.module.scss';

const label = 'Дата обновления: ';

export const RootComponent = () => {
  const data = {
    title: 'Новости',
    date: '20 сентября 2025', // частая ошибка ставить в моки конкретное представление даты, а не дату ISO
  };

  const { title, date } = data;

  return (
    <div className={styles.RootComponentContainer}>
      <h2>{title}</h2>
      <div className={styles.dateWrapper}>
        {label}
        <span className={styles.date}>{date}</span>
      </div>
      <NewsList />
    </div>
  );
};


// NewsList.tsx
import { NewsItem } from '@/app/MockExample/2/_components/NewsItem';
import styles from './NewsList.module.scss';

const label = 'Новости предоставлены агентством';

export const NewsList = () => {
  const dataObject = {
    source: 'Rei',
  };

  const data = new Array(5).fill(true);

  const { source } = dataObject;

  return (
    <div className={styles.Component1Container}>
      <div>
        {label} {source}
      </div>
      {data.map((_, index) => (
        <NewsItem key={'newsItem'+index} />
      ))}

      <div>Список авторов:</div>

      <ul>
        {data.map((_, index) => (
          <div className={styles.author} key={'author'+index}>
            Киселев Д.К.
          </div>
        ))}
      </ul>
    </div>
  );
};

// NewsItem.tsx
import styles from './NewsItem.module.scss';

const commentLabel = 'Комментариев:';
const favoritesLabel = 'Понравилось:';

export const NewsItem = () => {
  const data = {
    title: ' Новость №1',
    tag: 'Hit!',
    heading: 'Убийство в Восточном экспрессе',
    image: './mock.webp',
    alt: 'Обложка',
    commentCount: 5,
    favoritesCount: 5,
  };

  const { title, tag, heading, image, commentCount, favoritesCount, alt } = data;

  return (
    <div className={styles.NewsItemContainer}>
      <h3>{title}</h3>
      <div className={styles.tags}>{tag}</div>
      <h3>{heading}</h3>
      <div className={styles.date}>1933</div>
      <img src={image} alt={alt} />
      <div>
        {commentLabel} {commentCount}
      </div>
      <div>
        {favoritesLabel} {favoritesCount}
      </div>
    </div>
  );
};

Минусы

• обычно, это также один объект — без различных состояний и комбинаций данных

• при интеграции очень легко оставить замоканными какие-то дочерние компоненты, т. к. моки задаются на месте использования и никак не связаны

• остается минус отсутствия понимания необходимой полной структуры данных и отсутствия будущего контракта

3. Данные заданы объектом в каком-то корневом компоненте, в дочерние компоненты данные прокинуты пропсами

// page.tsx
import React from 'react';
import { RootComponent } from '@/app/MockExample/3/_components/RootComponent';

export default async function MockExample() {
  const data = {
    title: 'Отличное начало',
    comment: 'Но финал может быть грустным',
    subTitle: 'Новости',
    date: '20 сентября 2025',
    source: 'Rei',
    newsList: [
      {
        title: ' Новость №1',
        tag: 'Hit!',
        heading: 'Убийство в Восточном экспрессе',
        image: './mock.webp',
        alt: 'Обложка',
        commentCount: 5,
        favoritesCount: 5,
      },
    ],
    authorsList: [{ name: 'Киселев Д.К.' }],
  };

  const { title, comment, subTitle, date, source, newsList, authorsList } = data;

  return (
    <>
      <h1>{title}</h1>
      <RootComponent
        title={subTitle}
        date={date}
        source={source}
        newsList={newsList}
        authorsList={authorsList}
      />
      <div>{comment}</div>
    </>
  );
}


// RootComponent.tsx
import { NewsList } from '../NewsList';
import styles from './RootComponent.module.scss';

const label = 'Дата обновления: ';

type Props = {
  source: string;
  title: string;
  date: string;
  newsList: {
    title: string;
    tag: string;
    heading: string;
    image: string;
    alt: string;
    commentCount: number;
    favoritesCount: number;
  }[];
  authorsList: { name: string }[];
};

export const RootComponent = ({ title, date, source, newsList, authorsList }: Props) => {
  return (
    <div className={styles.RootComponentContainer}>
      <h2>{title}</h2>
      <div className={styles.dateWrapper}>
        {label}
        <span className={styles.date}>{date}</span>
      </div>
      <NewsList source={source} newsList={newsList} authorsList={authorsList} />
    </div>
  );
};

// NewsList.tsx
import { NewsItem } from '../NewsItem';
import styles from './NewsList.module.scss';

const label = 'Новости предоставлены агентством';
const authorsLabel = 'Список авторов:';

type Props = {
  source: string;
  newsList: {
    title: string;
    tag: string;
    heading: string;
    image: string;
    alt: string;
    commentCount: number;
    favoritesCount: number;
  }[];
  authorsList: { name: string }[];
};

export const NewsList = ({ newsList, authorsList, source }: Props) => {
  return (
    <div className={styles.Component1Container}>
      <div>
        {label} {source}
      </div>
      {newsList.map((newsItem, index) => (
        <NewsItem key={'newsItem'+index} />
      ))}

      <div>{authorsLabel}</div>

      <ul>
        {authorsList.map(({ name }, index) => (
          <div className={styles.author} key={'author'+index}>
            {name}
          </div>
        ))}
      </ul>
    </div>
  );
};


// NewsItem.tsx
import styles from './NewsItem.module.scss';

const commentLabel = 'Комментариев:';
const favoritesLabel = 'Понравилось:';

type Props = {
  title: string;
  tag: string;
  heading: string;
  image: string;
  alt: string;
  commentCount: number;
  favoritesCount: number;
};

export const NewsItem = ({
  title,
  tag,
  heading,
  image,
  commentCount,
  favoritesCount,
  alt,
}: Props) => {
  return (
    <div className={styles.NewsItemContainer}>
      <h3>{title}</h3>
      <div className={styles.tags}>{tag}</div>
      <h3>{heading}</h3>
      <div className={styles.date}>1933</div>
      <img src={image} alt={alt} />
      <div>
        {commentLabel} {commentCount}
      </div>
      <div>
        {favoritesLabel} {favoritesCount}
      </div>
    </div>
  );
};

Плюсы

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

Минусы

• обычно это также один объект — без вариаций

• остается минус отсутствия понимания необходимой структуры данных (т. к. один вариант, как правило полную картину состояний и полей не дает) и отсутствия будущего контракта

• здесь добавляется обычно такой минус: в дочерних компонентах типы прописывают через примитивы, не привязывая типы к исходному компоненту. В этом случае при интеграции и при изменениях типов или названий полей, вы получаете необходимость поправить их во всей цепочке компонентов. 

4. Создан массив моковых данных, отражающий различные состояния

В этом случае:

• создаем отдельный файл для моковых данных

  // mock.ts
  import { TMockExample, TNewsItem, TRootComponent } from '@/app/MockExample/4/types';
  
  const baseNewsItem: TNewsItem = {
    title: 'Короткий заголовок',
    tag: 'Есть длинный тег ',
    heading: 'Убийство в Восточном экспрессе',
    image: './mock.webp',
    alt: 'Обложка',
    commentCount: 5,
    favoritesCount: 5,
  };
  
  // моки типизируем
  export const mockNewsList: TNewsItem[] = [
    baseNewsItem,
    {
      ...baseNewsItem,
      tag: undefined, // разные состояния объектов
    },
    {
      ...baseNewsItem,
      image: undefined, // то же
    },
    {
      ...baseNewsItem,
      alt: undefined, // то же
    },
    {
      ...baseNewsItem,
      commentCount: undefined, // то же
    },
    {
      ...baseNewsItem,
      favoritesCount: undefined, // то же
    },
    {
      title: 'Очень длинный заголовок - реально длинный заголовок',
      heading: 'Убийство в Восточном экспрессе может быть значительно длиннее',
    }, // и здесь
  ];
  
  export const rootComponentBase: TRootComponent = {
    title: 'Новости',
    date: '20 сентября 2025',
    news: {
      source: 'Rei',
      newsList: mockNewsList,
      authorsList: [
        { name: 'Киселев Д.К.' },
        { name: 'Киселев-Заболотный-Залесский Д.К.' },
        { name: 'Киселев Д.К.' },
        { name: 'Киселев-Заболотный-Залесский Д.К.' },
        { name: 'Киселев Д.К.' },
        { name: 'Киселев-Заболотный-Залесский Д.К.' },
        { name: 'Киселев Д.К.' },
        { name: 'Киселев-Заболотный-Залесский Д.К.' },
        { name: 'Киселев Д.К.' },
        { name: 'Киселев-Заболотный-Залесский Д.К.' },
      ],
    },
  };
  
  export const rootComponentWithEmptyAuthorsList: TRootComponent = {
    title: 'Новости',
    date: '29 сентября 2025',
    news: {
      source: 'Interfax ',
      newsList: mockNewsList,
    },
  };
  
  export const mockExampleBase: TMockExample = {
    title: 'Отличное начало',
    comment: 'Но финал может быть грустным',
    rootComponentData: rootComponentBase,
  };
  

• отражаем в объектах все возможные состояния

• типизируем моки — в типах уже получаем полную картину для формулирования контракта

• прокидываем моки в точку получения данных, если нам нужно вывести компоненты непосредственно в приложение (либо используем истории в сторибуке)

  // page.tsx
  export default async function MockExample() {
    // здесь в дальнейшем будет получен ответ от API
    const { title, comment, rootComponentData } = mockExampleBase;
    //...
  }

• в дочерних компонентах прописываем типы на основе корневого (это справедливо для не переиспользуемых компонентов — уникальных для этой структуры. Конечно, если дочерние компоненты — ui или переиспользованы в других местах, типы там должны оставаться абстрактными)

  // RootComponent.tsx
  type RootComponentProps = {
    rootComponentData: TMockExample['rootComponentData'];
  };
  
  // NewsList.tsx
  type Props = {
    news: TMockExample['rootComponentData']['news'];
  };

• создаем истории в storybook на основе каждого элемента массива моков — получаем в сторибуке полную картину состояний для тестировщика, да и для нас самих это очень полезно при разработке

  // RootComponent.stories.tsx
  import type { Meta, StoryObj } from '@storybook/react';
  import { rootComponentBase, rootComponentWithEmptyAuthorsList } from '@/app/MockExample/4/mock';
  import { RootComponent, RootComponentProps } from './RootComponent';
  
  const meta = {
    title: 'Example/RootComponent',
    component: RootComponent,
  } satisfies Meta<RootComponentProps>;
  
  export default meta;
  type Story = StoryObj<typeof meta>;
  
  export const RootComponentBase: Story = {
    args: { rootComponentData: rootComponentBase },
  };
  
  export const RootComponentWithEmptyNewsList: Story = {
    args: { rootComponentData: rootComponentWithEmptyAuthorsList },
  };
  
  
  //NewsItem.stories.tsx
  import type { Meta, StoryObj } from '@storybook/react';
  import { mockNewsList } from '@/app/MockExample/4/mock';
  import { NewsItem, NewsItemProps } from './NewsItem';
  
  const meta = {
    title: 'Example/NewsItem',
    component: NewsItem,
  } satisfies Meta<NewsItemProps>;
  
  export default meta;
  type Story = StoryObj<typeof meta>;
  
  export const NewsItemBase: Story = {
    args: { newsItem: mockNewsList[0] },
  };
  
  export const NewsItemWithoutTag: Story = {
    args: { newsItem: mockNewsList[1] },
  };
  
  export const NewsItemWithoutImage: Story = {
    args: { newsItem: mockNewsList[2] },
  };
  
  export const NewsItemWithoutAlt: Story = {
    args: { newsItem: mockNewsList[3] },
  };
  
  export const NewsItemWithoutComments: Story = {
    args: { newsItem: mockNewsList[4] },
  };
  
  export const NewsItemWithoutFavorites: Story = {
    args: { newsItem: mockNewsList[5] },
  };
  
  export const NewsItemShort: Story = {
    args: { newsItem: mockNewsList[6] },
  };
  

• опционально, но очень полезно — по каждой истории сторибука автоматом формируется снэпшот/скриншот

Итого получается вот такие компоненты:

// page.tsx
import React from 'react';
import { RootComponent } from './_components/RootComponent';
import { mockExampleBase } from './mock';

export default async function MockExample() {
  // здесь в дальнейшем будет получен ответ от API
  const { title, comment, rootComponentData } = mockExampleBase;

  return (
    <>
      <h1>{title}</h1>
      <RootComponent rootComponentData={rootComponentData} />
      <div>{comment}</div>
    </>
  );
}

// RootComponent.tsx
import { TMockExample } from '@/app/MockExample/4/types';
import { NewsList } from '../NewsList';
import styles from './RootComponent.module.scss';

const label = 'Дата обновления: ';

export type RootComponentProps = {
  // типы наследуются от корневого элемента
  rootComponentData: TMockExample['rootComponentData'];
};

export const RootComponent = ({ rootComponentData }: RootComponentProps) => {
  const { title, date, news } = rootComponentData;
  return (
    <div className={styles.RootComponentContainer}>
      <h2>{title}</h2>
      <div className={styles.dateWrapper}>
        {label}
        <span className={styles.date}>{date}</span>
      </div>
      <NewsList news={news} />
    </div>
  );
};

// NewsList.tsx
import { TMockExample } from '@/app/MockExample/4/types';
import { NewsItem } from '../NewsItem';
import styles from './NewsList.module.scss';

const label = 'Новости предоставлены агентством';
const authorsLabel = 'Список авторов:';

type Props = {
  // типы наследуются от корневого элемента
  news: TMockExample['rootComponentData']['news'];
};

export const NewsList = ({ news }: Props) => {
  const { newsList, authorsList, source } = news;
  return (
    <div className={styles.Component1Container}>
      <div>
        {label} {source}
      </div>
      {newsList.map((newsItem, index) => (
        <NewsItem key={'newsItem'+index} newsItem={newsItem}  />
      ))}

      <div>{authorsLabel}</div>

      <ul>
        {authorsList?.map(({ name }, index) => (
          <div className={styles.author} key={'author'+index}>
            {name}
          </div>
        ))}
      </ul>
    </div>
  );
};

// NewsItem.tsx
import { TNewsItem } from '@/app/MockExample/4/types';
import styles from './NewsItem.module.scss';

const commentLabel = 'Комментариев:';
const favoritesLabel = 'Понравилось:';

export type NewsItemProps = { newsItem: TNewsItem };

export const NewsItem = ({ newsItem }: NewsItemProps) => {
  const { title, tag, heading, image, commentCount, favoritesCount, alt } = newsItem;

  return (
    <div className={styles.NewsItemContainer}>
      <h3>{title}</h3>
      <div className={styles.tags}>{tag}</div>
      <h3>{heading}</h3>
      <div className={styles.date}>1933</div>
      <img src={image} alt={alt} />
      <div>
        {commentLabel} {commentCount}
      </div>
      <div>
        {favoritesLabel} {favoritesCount}
      </div>
    </div>
  );
};

Плюсы

• есть единая точка получения данных — в случае проблем, будем сначала искать там, а не по мелким компонентам

• данные типизированы — можем сразу сформулировать контракт с готовыми структурами данных и их типами

• легко поменять данные

• легко поменять типы

• покрыты и сверстаны все состояния

• если есть снэпшоты/скриншоты - новые компоненты автоматически покрываются тестами на верстку

Минусы

• выглядит, как-будто надо приложить много усилий. На самом деле — нет. Профиты покрытия состояний и ускорение при интеграции все покрывают.

Ну, и наконец интеграция

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

Делаем подключение к беку, типизируем ответ.

// page.tsx  
import { RootComponent } from './_components/RootComponent';

export default async function MockExample() {
  const mockExampleResponse = await getMockExample();

  if (mockExampleResponse == null) {
    return;
  }

  const { title, comment, rootComponentData } = mockExampleResponse;

  return (
    <>
      <h1>{title}</h1>
      <RootComponent rootComponentData={rootComponentData} />
      <div>{comment}</div>
    </>
  );
}

// network/mockExample.ts
export const getMockExample = async () => {
  return apiClient
    .get<TMockExampleDTO>('http://localhost:3000/mock-example')
    .then(({ data }) => mapMockExample(data))
    .catch((error) => {
      console.error('***** [getMockExample]', error);
      return undefined;
    });
};

И тут опять возникает такая штука: большинство фронтов берут и начинают смешивать типы бека и типы фронтенда, т. к. они весьма похожи в какой-то момент времени. 

Делать этого не стоит, т. к. сущности все же разные и рано или поздно типы начнут расходиться и вы словите кучу проблем. Поэтому мы разделяем типы входящие (TMockExampleDTO) и внутренние (TMockExample), даже если они одинаковы.

// types
export type TMockExamplePageDTO = {
  title: string;
  comment?: string;
};

export type TNewsItemDTO = {
  title: string;
  tag?: string;
  heading: string;
  image?: string;
  alt?: string;
  commentCount?: number;
  favoritesCount?: number;
};

export type TNewsListDTO = {
  source: string;
  newsList: TNewsItemDTO[];
  authorsList?: { name: string }[];
};

export type TRootComponentDTO = {
  title: string;
  date: string;
  news: TNewsListDTO;
};

export type TMockExampleDTO = TMockExamplePageDTO & { rootComponentData: TRootComponentDTO };

Также в момент получения данных почти всегда возникает необходимость какие-то данные слегка преобразовать, развернуть, поменять название поля на camelCase, что-то подставить по умолчанию и т. д. Не стоит этого делать где-то в компонентах, сделайте в точке получения — в маппере (адаптере). Тогда вы всегда будете знать, где искать и это не будет расползаться по компонентам.

// здесь на входе тип бека, на выходе тип фронтенда
function mapMockExample(response: TMockExampleDTO): TMockExample {
  const {
    rootComponentData: {
      news: { newsList, ...newsRest },
      ...rootComponentDataRest
    },
    ...rest
  } = response;

  const mappedNewsList = newsList.map(({ image, ...newsItemRest }) => ({
    image: `${ASSETS_URL}${image}`,
    ...newsItemRest,
  }));

  return {
    ...rest,
    rootComponentData: {
      ...rootComponentDataRest,
      news: {
        ...newsRest,
        newsList: mappedNewsList,
      },
    },
  };
}

Поэтому обычной практикой у нас является установка адаптера после получения ответа от бека и как раз в маппере мы сопоставляем тип ответа и соответствующий ему фронтовый тип компонента. Это очень удобно, т. к. при изменениях бека, достаточно внести в тип бека изменения и тайпскрипт тут же вам скажет, что пора вносить изменения в адаптер. А т. к. в адаптере используется фронтовый тип корневого компонента, то мы сразу получаем полную картину необходимых изменений. 

Приведу пример: бек присылает нам в ответе вместо heading - headingRenamed.

Меняем тип бека

export type TNewsItemDTO = {
  title: string;
  tag?: string;
  headingRenamed: string; // heading -> headingRenamed
  image?: string;
  alt?: string;
  commentCount?: number;
  favoritesCount?: number;
};

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

Теперь меняем фронтовый тип.

export type TNewsItem = {
  title: string;
  tag?: string;
  headingRenamed: string; // здесь меняем
  image?: string;
  alt?: string;
  commentCount?: number;
  favoritesCount?: number;
};

И не руками, а автоматически меняются и пропсы вложенных компонентов и моки, благодаря нашей типизации.

Таким образом мы минимизирует ошибки и усилия при интеграции и это позволяет делать интеграции очень быстро и эффективно.