Используем Server Components и границы стриминга, чтобы сократить клиентскую работу и сохранить полезный доступный контент.
Современный App Router в Next.js — не просто более новый способ строить React-приложения, это иная модель производительности. Server Components, стриминг и edge-рантайм позволяют отправлять в браузер драматически меньше JavaScript, доставляя контент быстрее. При грамотном применении они и есть разница между сайтом, который ощущается мгновенным, и тем, что крутит спиннер.
Server Components: отправляйте меньше JavaScript
Каждый компонент, который может отрисоваться на сервере, должен это делать. Server Components отправляют готовый HTML вместо того, чтобы слать клиенту код компонента, его зависимости и логику получения данных. Результат — меньший бандл, более быстрая гидратация и контент, который виден до того, как выполнится хоть одна строка клиентского JavaScript.
Стриминг и границы Suspense
Стриминг позволяет серверу отправлять страницу по частям. Оберните медленные или насыщенные данными секции в Suspense — и быстрые части отрисуются немедленно, пока остальное заполняется, без ожидания завершения самого медленного запроса, прежде чем пользователь хоть что-то увидит.
- Держите клиентские компоненты небольшими и вынесенными к листьям дерева
- Стримьте секции ниже линии сгиба и насыщенные данными за Suspense
- Отрисовывайте на edge, чтобы ответы начинались ближе к пользователю
- Лениво загружайте тяжёлые интерактивные виджеты после первой отрисовки
Паттерны, а не трюки
Ни одна из этих функций не является волшебным переключателем. Серверные и клиентские границы, стриминг и среду выполнения нужно проектировать для каждого маршрута, а размер бандла и время ответа измерять в production-сборке.