В октябре 2022 Vercel выпустила Next.js 13 с новым App Router и серверными компонентами. Мы переписали один из наших B2B-проектов и спустя месяц - рассказываем, что хорошо, что плохо, и стоит ли запрыгивать.
Что хорошо
Server Components ощутимо уменьшают bundle
На наш проект переход дал минус 38% client JS. Тяжёлые библиотеки для работы с данными переехали на сервер, клиент стал заметно тоньше. На медленных сетях разница в TTI - секунды.
Layouts наконец перестали быть болью
Раньше для shared layout приходилось городить _app.tsx с условиями. Сейчас layout.tsx работает естественно, перерендериваются только нужные сегменты. Особенно приятно для приложений с боковыми панелями и stable navigation.
Параллельные fetch-запросы из коробки
Серверные компоненты в одной странице фетчат параллельно без специальных трюков. Это убирает целый класс ошибок «забыл про Promise.all».
Что плохо
Сырая документация
Многие edge-cases не описаны. Регулярно приходится читать issues на GitHub и смотреть исходники, чтобы понять, как сделать что-то нестандартное.
Несовместимость с частью библиотек
Многие React-библиотеки 2020–2021 не работают в Server Components, потому что используют context напрямую. Часть - пришлось обернуть в Client Component, часть - заменить.
Кэширование сложно объяснить
В Next 13 четыре уровня кэша, которые могут конфликтовать. На команде ушло 2 недели, чтобы каждый чётко понимал, какой fetch попадает в какой кэш и как это инвалидировать.
Что мы решили на других проектах
- Новые проекты на Next 13 + App Router запускаем сразу.
- Существующие на Pages Router пока не мигрируем - миграция занимает 4–8 недель и не всегда окупается.
- Маленькие проекты (лендинги, простые SaaS) лучше оставлять на Pages - оверхед App Router не оправдан.
- Heavy SSR-проекты с большим bundle - переходить, выгода ощутимая.