Как структурировать Next.js приложения

В Next.js роутинг приложения и шаблоны основаны на расположении файлов. Этот подход влияет на то, как создаются приложения на Next.js.

Алекс Кондов в своем блоге описал, как структурировать Next.js приложения. За основу был взят принцип совместного размещения (co-location). В идеале вещи, которые связаны, должны находиться рядом. Поэтому можно создать папку модули, в которой будут находиться модули по доменам. Однако, по умолчанию в Next.js часть логики домена будет храниться в странице – в getServerSideProps и компоненте. Это приводит к фрагментации логики приложения.

Чтобы решить эту проблему, можно использовать гексагональную архитектуру и использовать роутинг Next.js как адаптер к нашей логики. Компонент страницы и логику getServerSideProps можно хранить в модулях и импортировать в страницу роута Next.js:

import ItemsPage from "modules/items/ItemsPage";
import itemsPageProvider from "modules/items/itemsPageProvider";

export default function Page({ user }) {
  return <ItemsPage user={user} />
}

export async function getServerSideProps(context: NextPageContext) {
  const { req, query } = context
  const props = itemsPageProvider.getPageProps(req, query)
  return { props }
}

https://alexkondov.com/structuring-next-applications/

Создание анимированного тултипа с помощью Framer Motion

Гайд по созданию компонента тултипа с помощью библиотек Framer Motion и Floating UI. В нем подробно описывается каждый шаг использования конкретного хука и функции. Помимо обычного тултипа, в гайде описано как создать групповой тултип с анимацией перехода.

https://sinja.io/blog/animated-tooltip-with-react-framer-motion

Что такое React Server Components

React Server Components стирает грань между сервером и клиентом, позволяя React компонентам загружать данные на сервере и отправлять отрендеренный компонент клиенту.

Преимущество React Server Components в уменьшении нагрузки браузера и уменьшении JS бандла клиента. Также уменьшается сетевой водопад браузера.

Выглядят React Server Components так же, как и обычные, только в них есть ряд ограничений. Например, в них нельзя использовать хуки.

Также вышел релиз Next.js 13.4, в котором они объявили стабильным новый роутер с React Server Components. Это значит, что RSC можно использовать в продакшене.

https://www.viget.com/articles/what-even-are-react-server-components/

Курс по React и TypeScript

Бесплатный курс от Matt Pocock по использованию TypeScript в React. Автор объясняет с самых азов, поэтому курс подойдет для начинающих.

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

https://www.totaltypenoscript.com/tutorials/react-with-typenoscript

React Canaries

Команда React представила новый канал релизов – Canary. Этот канал позволит фреймворкам типа Next.js адаптировать новые фичи раньше официального стабильного релиза.

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

В блоге команда React описала процесс релиза новых фич. В экспериментальных релизах React в API фичи имеют префикс experimental_ или unstable_. По мере использования фичи, если всех устраивает то как она устроена, то она будет избавлена от префиксов и зарелизена в Canary. На этом этапе также будет добавлена документация по фиче.

https://react.dev/blog/2023/05/03/react-canaries

Контекст, композиция и гибкость

Автор на примере поля ввода показывает, как улучшить гибкость компонента с помощью контекста. Если в компоненте есть разные варианты отображения, которые устанавливаются от страницы к странице, то можно использовать контекст для управления отображением компонента. Например:

function Input({ id, label, required = false }) {
  const variant = useInputStyleContext()

  const getHelperText = () => {
    if (variant === 'showOptionals' && !required) return ' (optional)'
    if (variant === 'showRequireds' && required) return '*'

    return null
  }

  return (
    <div>
      <label htmlFor={id}>
        {label}
        {getHelperText()}
      </label>
      <input id={id} required={required} />
    </div>
  )
}

https://kyleshevlin.com/context-composition-and-flexibility

Изучаем React Server Component по викторинам

Дэн Абрамов провел опрос по React Server Component. В результате оказалось, что почти половина ответов неверны. RSC сложный, особенно это связано с тем, что по ней нет нормальной документации.

Херрингтон Даркхолм объяснил, как работает RSC изнутри, и по шагам показал, какие происходят действия при рендере компонента. Если кратко, то серверные компоненты передаются на клиент в виде JSON. Серверные компоненты, которые используют async/await вначале заменяются на клиенте на плейсхолдеры, а после выполнения передаются в браузер.

https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4

WunderGraph как альтернатива Vercel

Vercel предоставляет удобный сервис для деплоя ваших приложений. Но у него дорогие дополнительные услуги хранения: Vercel Postgres, Vercel KV и Vercel Blob.

В качестве альтернативы можно выбрать WunderGraph. Это open-source проект, который добавляет бэкенд для фронтенда. Можно выбрать свою базу данных или сервис с OpenApi, и WunderGraph CLI сгенерирует хуки для использования сервисов в приложении. Для деплоя на собственных серверах можно использовать Docker.

В качестве альтернативных сервисов Vercel Storage можно использовать Neon Tech для Postgres, Upstash как KV хранилище и Cloudflare R2 для хранения файлов.

https://javanoscript.plainenglish.io/dodging-the-vercel-storage-tax-there-are-better-open-source-alternatives-ef04e537b598

Понимание React Concurrency

В React 18 появились новые фичи Concurrency: useTransition и useDeferredValue. В своем блоге Слава Князев написал, как концептуально работают эти фичи изнутри.

Основная мысль React Concurrency в том, что при рендере следующего отображения текущее отображение остается отзывчивым. Под капотом для достижения такого эффекта используется requestIdleCallback() для вызова рендеринга приложения:

function renderConcurrent(Component) {
    // Рендер отменяется, если стейт устарел
    if (isCancelled) return;

    for (let Child of Component) {
        // Выполнить работу когда браузер освободится 
        requestIdleCallback(() => renderConcurrent(Child));
    }
}

https://www.bbss.dev/posts/react-concurrency/

Legend-State 1.0

Вышел релиз библиотеки для управления состоянием Legend-State. Эта библиотека заявляет, что является одной из самых быстрых по бенчмаркам и может весить всего 3Кб.

Библиотека основана на Observables. Компонент в React будет обновляться только тогда, когда изменятся данные, которые он использует.

В библиотеке есть встроенный плагин для сохранения стейта в localStorage или IndexedDB для создания персистентности.

Также библиотека предоставляет набор компонентов для реактивности, которые позволяют уменьшить количество рендеров компонента. Поддерживаются следующие реактивные элементы, которые обновляются сами без ре-рендера компонента:
- Текстовые элементы
- Пропсы элемента
- Компоненты управления потоком
- Двусторонний биндинг элементов ввода

Пример использования реактивных элементов:

function Component({ children }) {
  // Этот компонент рендерится только один раз
  const state = useObservable({ show: false, toggles: 0, text: 'Change me' })

  useInterval(() => {
    state.show.set(v => !v)
    state.numToggles.set(v => v + 1)
  }, 1000)

  // Пропсы заканчивающиеся на $ биндят проп к  Observable
  // для конкретных изменений без ре-рендера
  return (
    <div>
      <Legend.input value$={state.text} />
      <Legend.div
        className$={() => (
          state.text.get().includes('Legend') && 'font-bold text-blue-500'
        )}
      >
        {state.text}
      </Legend.div>
      <div>
        Modal toggles: {state.numToggles}
      </div>
      <Show
        if={state.show}
        else={<div>Not showing modal</div>}
      >
        <div>Modal</div>
      </Show>
    </div>
  )
}

https://legendapp.com/open-source/legend-state-v1/

Как избежать моков в тестах с React Router

Для того чтобы тестировать компоненты, где используется React Router, необходимо использовать обертку для рендера компонентов. Это нужно как просто для теста компонента с роутами, так и для теста навигации между страницами.

Для обертки компонента для тестов нужно использовать MemoryRouter. Вот пример такой функции, которая создана поверх render из RTL:

import React, { isValidElement } from "react";
import { render } from "@testing-library/react";
import { RouterProvider, createMemoryRouter } from "react-router-dom";

export function renderWithRouter(children, routes = []) {
  const options = isValidElement(children)
    ? { element: children, path: "/" }
    : children;

  const router = createMemoryRouter([{ ...options }, ...routes], {
    initialEntries: [options.path],
    initialIndex: 1,
  });

  return render(<RouterProvider router={router} />);
}

Пример использования:

it("should ensure the page is rendered", () => {
  renderWithRouter(<About />);

  expect(screen.getByText("About page")).toBeInTheDocument();
});

https://webup.org/blog/how-to-avoid-mocking-in-react-router-v6-tests/

Практикуйте React, исправляя тесты

Если вы сомневаетесь в своих знаниях JSX, то можете их проверить. Есть репозиторий с тестами, которые помогут проверить знания JSX. Каждому тесту дано описание и нужно сделать так, чтобы он выполнялся. Ну а если не хочется клонировать репозиторий, то можно сделать это в браузере в CodeSandbox.

https://reactpractice.dev/exercise/practice-react-by-fixing-tests-check-your-jsx-knowledge/

Борьба с раздуванием HTML

Разделение интересов, к которому стремятся в UI библиотеках, позволяет больше переиспользовать компоненты, но ведет к раздуванию HTML. Одни компоненты создают отступы, другие стилизуют что-то и т.д. Это приводит к созданию лишних компонентов-оболочек.

Причины, по которым не нужны лишние компоненты-оболочки:

1. Раздутый HTML вредит производительности.
2. Избыточные элементы создают проблемы с доступностью.
3. Избыточные элементы могут нарушить стиль.
4. Раздражает работать с глубоко вложенными DOM деревьями.

В своем блоге Элиза Хайн подготовила набор техник, которые позволяют сделать компоненты гибкими и не раздувать HTML.

https://elisehe.in/2023/03/27/minimal-html-in-design-systems

Как сделаны типы React

В блоге JSer показали основные типы React, которые используются чаще всего, а также показали их исходный код с комментариями. Например, в статье объясняется в чем отличие ReactElement от ReactNode. Если коротко, то используется аналогия с вебом: Node и Element, где Element является подтипом Node. Также и в React, ReactElement является подтипом ReactNode.

interface ReactElement<
  P = any, 
  T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>
 > {
  type: T;
  props: P;
  key: Key | null;
}

type JSXElementConstructor<P> =
  | ((
        props: P,
    ) => ReactElement<any, any> | null)
  | (new (props: P) => Component<any, any>);

ReactElement может быть как <Component>, так и любой HTML тег, например <p>.

https://jser.dev/2023-05-31-react-types-in-typenoscript/

RSC с нуля

Дэн Абрамов написал большой гайд с глубоким погружением в работу RSC о том, как реализовать RSC с нуля.

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

Гайд поделен на части, в каждой из которых показывается, как создать что-то существующее с нуля. Например, как рендерить JSX в HTML, как сделать поддержку асинхронности в компонентах и как обновлять JSX с сервера на клиенте.

https://github.com/reactwg/server-components/discussions/5

Несколько уровней абстракций в UI библиотеке

В блоге Spotify рассказали как делают UI библиотеку, чтобы сохранялся баланс между кастомизацией и конфигурацией компонентов. Кастомизация обеспечивает свободу и скорость разработки, а конфигурация обеспечивает связность и удобство сопровождения за счет использования абстракций. Чем больше абстракций, тем больше контроля со стороны разработчика UI библиотеки и меньше вводимых данных со стороны пользователя.

В Spotify у компонента есть несколько уровней абстракций. Можно использовать компонент как есть, так и кастомизировать компонент, передав в него любое содержимое. Есть три варианта использования:

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

https://engineering.atspotify.com/2023/05/multiple-layers-of-abstraction-in-design-systems/

Почему клиентские компоненты во время SSR преобразуются в HTML?

Когда появился React Server Components, произошло разделение на клиентские и серверные компоненты. Дэн Абрамов сделал небольшое визуальное объяснение различий между Client Tree (уже существующим) и Server Tree, который был добавлен в RSC.

Исходя из поста клиентские компоненты (Client Tree) - это обычные компоненты React, которые мы использовали раньше. Во время SSR клиентские компоненты выполняются на сервере и преобразуются в HTML для инициализации страницы, как и раньше.

https://github.com/reactwg/server-components/discussions/4

Million.js: замена VDOM для React

Million.js – это замена VDOM для React, которая увеличивает скорость работы приложения в несколько раз. Библиотека использует подход Block Virtual DOM, который по другому определяет различия и его работу можно разбить на две части:

1. Статический анализ: Virtual DOM анализируется для извлечения динамических частей дерева в хэш-карту, сопоставляя их со стейтом.
2. Грязная проверка: стейт (не Virtual DOM) сравнивается, чтобы определить, что изменилось. Если стейт изменился, то DOM обновляется через хэш-карту.

Таким образом, Million.js наиболее эффективен в случае, когда на сайте много статического контента и мало динамических частей.

В Million.js есть свои ограничения и правила, которые созданы для увеличения производительности приложения. Например, одно из них – не рекомендуется использовать UI библиотеки типа Material UI или Chakra UI, т.к. они не оптимизированы для работы с Million.js.

https://million.dev/

Как BlueSky структурирует приложение и управляет стейтом

Алекс Кондов в своем блоге разобрал архитектуру приложения BlueSky. BlueSky – это социальная сеть, универсальное приложение, которое использует react-native и создается для веба и как приложение для iOS/Android.

Изучение открытых проектов помогает изучить новые архитектурные подходы и приемы в организации стейта. В BlueSky в качестве стейт-менеджера используется Mobx и использует ООП-подход для реализации стейта в классах моделей. Вся бизнес логика находится в классах-стейтах, а компоненты используют ее.

https://alexkondov.com/reading-code-bluesky/

Современный CSS для динамической компонентной архитектуры

В блоге Modern CSS вышел гайд по использованию современного CSS с фокусом на темизацию, адаптивный макет и дизайн компонентов. Стефани Эклз рассказывает про фичи CSS, которые улучшают организацию кода и про фичи компоновки, такие как grid и container query. Также автор разберет как создать основные компоненты дизайн системы с помощью современного CSS: кнопка, карточка, пагинация.

https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/

Hyper Fetch 5.0: фреймворк для получения данных

Hyper Fetch – относительно новый фреймворк для получения данных. Он включает в себя логику для выполнения запросов, кэширования, создания очередей и offline-first режима. Основные особенности:
- написан на TypeScript.
- есть мапперы запросов/ответов, где можно сделать валидацию.
- поддержка дедупликации запросов, создание очереди запросов, создание интерцепторов, отмена запросов.
- поддержка кастомных адаптеров, включая Firebase и Graphql.
- есть отдельный модуль для работы с сокетами.
- встроенная возможность создания моков.
- есть поддержка React.

Примеры создания запросов:

export const getUser = builder.createRequest<UserModel>()({
  endpoint: "/api/user/:userId",
  cache: true,
  cacheTime: DateInterval.second * 10
});

export const postFile = builder
  .createRequest<{ response: string }, { file: File }>()({
    endpoint: "/api/files",
    method: "POST",
    queued: true,
    retry: 0
  })
  .setDataMapper((data) => {
    try {
      const formData = new FormData();
      formData.append("file", data.file);
      return formData;
    } catch (err) {
      return data;
    }
  });

https://hyperfetch.bettertyped.com/