Понимание серверных компонентов в React 18 и Next.js 13

Серверные компоненты – это новая концепция, представленная в React 18 и была реализована в Next.js 13 в папке /app. Серверные компоненты позволяют рендерить компоненты на сервере и уменьшить объем JS отправляемого клиенту.

Все компоненты Next.js в папке /app по умолчанию являются серверными компонентами. Чтобы сделать компонент клиентским, нужно добавить директиву ’use client’; в начало файла.

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

https://programmingwithmosh.com/react/understanding-server-components-in-react-18-and-next-js-13/

Evolu – хуки для local-first разработки

Библиотека для создания local-first приложений. Поддерживает синхронизацию со сквозным шифрованием с использованием CRDT. Для локального хранения данных использует SQLite WASM. Особенности:

- Типизированная схема данных.
- Реактивные запросы.
- Работа в режиме реального времени: синхронизация при восстановление сети.
- Вместо SQL запросов используется типобезопасный query builder.

Описание схемы и создание хуков:

import * as S from "@effect/schema";
import * as E from "evolu";

const TodoId = E.id("Todo");
type TodoId = S.Infer<typeof TodoId>;

const TodoTable = S.struct({
  id: TodoId,
  noscript: E.NonEmptyString1000,
  isCompleted: E.SqliteBoolean,
});
type TodoTable = S.Infer<typeof TodoTable>;

const Database = S.struct({
  todo: TodoTable,
});

const { useQuery, useMutation, useOwner, useOwnerActions, useEvoluError } =
  E.createHooks(Database);

Выполнение запросов:

const { rows } = useQuery((db) =>
  db
    .selectFrom("todo")
    .select(["id", "noscript"])
    .orderBy("updatedAt"),
  // (row) => row
  ({ noscript, ...rest }) => noscript && { noscript, ...rest }
);

https://github.com/evoluhq/evolu

Читаем исходный код – Chakra UI

Chakra UI – популярная UI библиотека для React. Она модульная и поддерживает кастомизацию компонентов.

Алекс Кондов изучил исходный код библиотеки и поделился интересными абстракциями, которые он нашел. Будет полезно изучить код тем, кто занимается разработкой UI библиотеки.

Пример создания контекста:

export const [ButtonGroupProvider, useButtonGroup] =
  createContext<ButtonGroupContext>({
    strict: false,
    name: 'ButtonGroupContext',
  })

export function createContext<T>(options: CreateContextOptions<T> = {}) {
  // ...
  const Context = createReactContext<T | undefined>(undefined)
  // ...

  function useContext() {
    const context = useReactContext(Context)

    if (!context && strict) {
      const error = new Error(
        errorMessage ?? getErrorMessage(hookName, providerName),
      )
      // ...
      throw error
    }

    return context
  }

  return [Context.Provider, useContext, Context] as CreateContextReturn<T>
}

https://alexkondov.com/reading-code-chakra-ui/

Почему вы должны использовать React фреймворк

При создании проекта на React, используйте фреймворк, например, Next.js, Gatsby или Remix. Ли Робинсон объяснил, почему это нужно делать:
- Меньше времени на подключение инструментов, больше времени на создание продукта.
- Более легкая адаптация и обучение новых разработчиков.
- Гибкость для различных стратегий рендеринга (браузерная или серверная).
- Меньше “велосипедов” в проекте.
- Есть готовые инструменты для деплоя проекта.

https://leerob.io/blog/react-frameworks

Эффективный HOC

HOC – концепция пришедшая из функционального программирования. Это функция, которая принимает компонент и возвращает его с дополнительной логикой.

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

Слава Князев в своем блоге написал туториал по HOC. В нем он описал, что можно и нельзя делать с помощью HOC.

Пример HOC логирования:

const withPropsLogger = (Component) => (
  (props) => {
    console.log(props);
    return <Component {...props}/>
  };
);

https://www.bbss.dev/posts/effective-hocs/

dnd-kit – drag&drop библиотека для React

Легковесная, модульная и расширяемая библиотека для перетаскиваний в React. Основные фичи:

- Возможность кастомизации алгоритма обнаружения коллизий, рендер оверлея во время переноса и многое другое.
- Поддержка нескольких методов ввода: клавиатура, мышь, touch, pointer.
- Для работы с React предоставляет два хука: useDraggable и useDroppable.
- 0 внешних зависимостей и модульная: ядро библиотеки весит 10Кб.
- Возможность кастомизации анимаций, переходов, стилей и т.д.
- Пресеты: есть готовый пресет @dnd-kit/sortable для создания сортируемых блоков.

Библиотека не использует HTML5 Drag and drop API из-за ограничений в API. В этом API не поддерживаются сенсорные устройства и нет возможности детальной кастомизации поведения. Главный недостаток отказа от HTML5 Drag and drop API в том, что вы не сможете перетаскивать файлы с рабочего стола компьютера или между окнами.

https://docs.dndkit.com/

Релиз TypeScript 5.0

Вышла стабильная версия TypeScript 5.0. Авторы обещают, что у большинства разработчиков обновление пройдет гладко.

После RC есть небольшие изменения, основное из них – минимальная поддерживаемая версия Node.js 12.20.

Кроме изменений, описанных в RC, есть другие изменения:

Улучшение enum

Теперь все enum будут enum перечислениями: каждый элемент enum будет иметь уникальный тип. Если в TypeScript 4.9.5 такой код работает:

enum E {
    Foo = 10,
    Bar = 20,
}

function takeValue(e: E) {}

takeValue(E.Foo); 
takeValue(123); 

То в TypeScript 5.0 вызов функции takeValue(123) будет выбрасывать ошибку, т.к. 123 не равен ни одному типу E.

Поддержка export type *

// models/vehicles.ts
export class Spaceship {
  // ...
}

// models/index.ts
export type * as vehicles from "./vehicles";

// main.ts
import { vehicles } from "./models";

Улучшение поддержки JSDoc

Добавлена поддержка @satisfies и @overload в документации JSDoc.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-0/

Библиотека для анимаций AutoAnimate

AutoAnimate – это одна из наиболее простых библиотек для анимаций, которая запускается одной командой:

import { useAutoAnimate } from '@formkit/auto-animate/react'

function MyList () {
  const [animationParent] = useAutoAnimate()
  return (
    <ul ref={animationParent}>
      {/* 🪄 Magic animations for your list */}
    </ul>
  )
}

Библиотека подходит для простых анимаций и анимирует как сам элемент, на который навешен реф, так и прямые дочерние элементы. Анимация запускается, когда происходит одно из событий:
- Дочерний элемент добавлен в DOM.
- Дочерний элемент удален из DOM.
- Дочерний элемент перемещен в DOM.

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

https://auto-animate.formkit.com/

Красивые эффекты с WebGL Render Targets

Максим Хекель сделал руководство по созданию оптических иллюзий и эффектов переходов с помощью WebGL Render Targets.

https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/

Что такое Vite и почему вы должны использовать его вместо CRA

Очень долгое время по умолчанию способом создания проекта на React был Create React App. Один из минусов CRA – время сборки проекта в dev в режиме. При увеличении кодовой базы проекта пропорционально увеличивается время сборки. Связано это с тем, что при изменении файла происходит пересборка всего билда.

Vite работает гораздо быстрее. Вместо пересборки всего билда, Vite работает по другому. Зависимости приложения, которые редко меняются, упаковываются в один бандл. А исходный код приложения не упаковывается в бандл, а распространяется через нативный ESM. Для production сборки используется бандлинг через Rollup.

https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app

Ленивая загрузка роутов в React Routes

В React Router 6.4 была представлена концепция “Data Router”, основное внимание которого уделяется разделению получения данных и рендеринга для исключения “водопадов” загрузки данных.

В React Router 6.9 появилась возможность ленивой загрузки роутов с компонентом и функцией получения данных. Пример:

// app.jsx
import Layout, { getUser } from `./layout`;
import Home from `./home`;

const routes = [{
  path: '/',
  loader: () => getUser(),
  element: <Layout />,
  children: [{
    index: true,
    element: <Home />,
  }, {
    path: 'projects',
    lazy: () => import("./projects"), // 💤 Lazy load!
    children: [{
      path: ':projectId',
      lazy: () => import("./project"), // 💤 Lazy load!
    }],
  }],
}]

// projects.jsx
export function loader = () => { ... }; 
export function Component() { ... } 

// project.jsx
export function loader = () => { ... }; 
export function Component() { ... } 

Обратите внимание на наименование экспортируемых переменных: loader и Component.

React Router может загружать lazy роуты параллельно. При переходе по URL /projects/123 будут параллельно загружены роуты и выполнены loader функции, после чего будет отрендерен компонент.

https://remix.run/blog/lazy-loading-routes

Мультиязык в Next.js с помощью серверных компонентов

Ян Аманн рассказал, как сделать мультиязычный сайт с помощью next-intl и серверных компонентов в Next.js.

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

Стоит учитывать, что в серверных компонентах нельзя использовать хуки, например, useState и useEffect. В этом случае одним из вариантов хранения состояния на странице может стать URL search params.

https://www.smashingmagazine.com/2023/03/internationalization-nextjs-13-react-server-components/

React Labs: над чем мы работали – март 2023

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

- Серверные компоненты. Достигли соглашения по использованию директивы "use client" для обозначения только клиентских компонентов. Сделали async / await как основной способ получения данных в серверных компонентах, и хук use для клиентских компонентов. Сейчас ведется разработка того, как отправлять данные с клиента на сервер – Server Action.

- Asset Loading. Ведется разработка интеграции Suspense и загрузки ресурсов: стилей, шрифтов и изображений. Команда React хочет, чтобы эта фича работала без рефакторинга существующих компонентов. В качестве оптимизации предоставят возможность ручной загрузки ресурсов напрямую из компонента.

- Метаданные документа. Появилась возможность использовать теги <noscript>, <meta> и <link> внутри компонента, и они будут установлены внутри тега <head>. Это решает проблему поточного серверного рендера.

- React Optimizing Compiler. Команда React продолжает делать компилятор React Forget. Основная цель компилятора в том, чтобы компонент ре-рендерился только когда изменится значение пропа. Сейчас React ре-рендерит компонент, когда изменится ссылка на объект. С React Forget компонент будет ре-рендерится при изменении семантического значения.

- Offscreen Rendering. Эта фича позволяет рендерить компоненты в фоновом режиме без дополнительных затрат на производительность. Похожа на CSS свойство content-visiblity. Большинство разработчиков не будет напрямую работать с offscreen API, а будут взаимодействовать через существующие роутеры и UI библиотеки.

Transition Tracing. Это API позволит определять, когда хук useTransition становится медленнее, и выяснить, почему это происходит.

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023

Переосмысление лучших практик React

React 18, наряду с React Server Components, сделал значительный шаг в сторону серверного рендера. Особенно это видно в таких фреймворках как Remix и Next, где поток данных распространяется на сервер, и приложение превращается в MPA с интерактивностью SPA.

На FrontendMastery вышла статья, в которой проведен анализ эволюции React от библиотеки представления на стороне клиента до фреймворков с рендером на сервере.

https://frontendmastery.com/posts/rethinking-react-best-practices/

React Chrono – гибкий компонент таймлайна

Вышел релиз второй версии библиотеки React Chrono. С помощью этой библиотеки можно рендерить кастомизируемые таймлайны в вертикальной и горизонтальной ориентации. В новой версии появилась возможность рендерить вложенные таймлайны.

https://react-chrono.prabhumurthy.com/

Написание собственной библиотеки Сигнал

Люк Шафер в своем блоге сделал туториал по созданию собственной библиотеки наподобие Сигнал. Получилась упрощенная версия без оптимизаций, но достаточная, чтобы понять саму концепцию.

Сигнал в основном используется в SolidJS и также был добавлен в Angular, Preact и Qwik. Сигнал можно использовать и в React, используя @preact/signals-react.

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

export function Counter() {
 const [count, setCount] = createSignal(0);

 return <button onClick={() => setCount(count() + 1)}>{count()}</button>
}

https://www.lksh.dev/blog/writing-your-own-reactive-signal-library/

Увеличиваем скорость работы Tanstack Table быстрее в 1000 раз

В блоге Jp Camara статья с разбором проблемы с производительностью библиотеки ​​Tanstack Table. Проблема была в том, что при использовании таблицы с группировкой столбцов, рендеринг 50к строк занимал 30-40 секунд. Использовать браузерный профайлер было невозможно из-за слишком медленной работы приложения. Поэтому для оценки скорости рендера и поиска проблемных мест использовался console.time.

Проблема была обнаружена внутри функции группировки библиотеки Tanstack Table:

function groupBy(rows, columnId) {
  const groupMap = new Map<any, Row<TData>[]>()
 
  return rows.reduce((map, row) => {
    const resKey = `${row.getValue(columnId)}`
 const previous = map.get(resKey)
 if (!previous) {
   map.set(resKey, [row])
 } else {
   map.set(resKey, [...previous, row])
 }
 return map
  }, groupMap)
}

Здесь использовался спред оператор […previous, row] для конкатенации текущей строки в конец массива. Так как он использовался внутри другого цикла reduce, то сложность функции группировки была O(n^2). Поэтому для 50к строк выполнялось 2,5 миллиарда итераций.

https://jpcamara.com/2023/03/07/making-tanstack-table.html

Modern.js – фреймворк от ByteDance

Modern.js - это фреймворк на React от ByteDance. Возможно, вы не слышали о нем, но это полноценный фреймворк на React, у которого уже вышла 2ая версия, и есть готовая экосистема инструментов.

Фреймворк похож на Next.js и Remix. Роутинг на основе структуры в файловой системе, и есть файлы layout и page для рендера страниц. Для загрузки данных используются файлы layout.loader.ts и page.loader.ts, в которых экспортируются функции получения данных. Для получения данных в компоненте страницы используется хук useLoaderData.

// page.loader.ts
export type ProfileData = {
  /*  some types */
};

export default async (): Promise<ProfileData> => {
  const res = await fetch('https://api/user/profile');
  return await res.json();
};

// page.tsx
import { useLoaderData } from '@modern-js/runtime/router';
import type { ProfileData } from './page.loader.ts';

export default function UserPage() {
  const profileData = useLoaderData() as ProfileData;
  return <div>{profileData}</div>;
}

Другие возможности:
- Создание BFF. Для этого нужно добавить BFF плагин в конфиг, и можно определять свои функции в папке /api.
- Кастомизация веб-сервера. Можно добавить обработку аутентификации пользователя, пререндеринг скелетона приложения и т.д.
- Встроенная поддержка микро-фронтенда. Через конфиг можно настроить работу нескольких фронтенд приложений.
- Есть встроенный стейт-менеджер – Reduck, созданный на основе Redux.

Помимо фреймворка в экосистеме есть Modern.js Module и Modern.js Doc. Это инструменты для создания npm пакетов и фреймворк для создания документов соответственно.

https://modernjs.dev/en

Популярные ошибки при работе с React

В блоге Alex Khomenko вышел обзор популярных ошибок при работе с React. Некоторые из них:

Изменение стейта напрямую

При обновлении не примитивных значений, таких как объект или массив, нужно предоставить другую ссылку на объект. В ином случае, React не поймет, что стейт изменился и нужно сделать ре-рендер. Для решения проблемы можно использовать спред оператор, map для изменения объектов внутри массива, новое API structuredClone или библиотеки для работы с иммутабельностью, например Immer.js.

Забыть, что обновление стейта происходит асинхронно

Часто бывает, что пытаются обратиться к значению стейта сразу после его установки:

function Counter() {
  const [count, setCount] = useState(0);
 
  const increment = () => {
    setCount(count + 1);
    console.log(count); // 0
  };
}

Однако, значение стейта обновится только при следующем рендере. Следовательно, нет смысла сразу читать значение стейта после установки. Для решения проблемы можно использовать useEffect.

https://claritydev.net/blog/the-most-common-mistakes-when-using-react

Сборник задач по TypeScript

Type Challenges – большой сборник задач по TypeScript, разбитый по категориям и уровню сложности. Решать задачи предлагается в песочнице TypeScript, там же уже есть тесты для проверки решения. Этот проект своего рода LeetCode, только для тренировки навыков написания TypeScript типов.

https://github.com/type-challenges/type-challenges

Еще один интересный проект по TypeScript – курс по типам от автора библиотеки TS-Pattern. Хоть курс и платный, первые четыре статьи бесплатные. В них много интересного материала по созданию типов в TypeScript, и в конце статьи есть задачи на практику.

https://type-level-typenoscript.com/