Тёма Сенюков — Next.js. Как ты вообще рендеришь?

• Приветствие участников конференции.  

• Представление Алексея Хлебаева и Темы Синякова.  

• Упоминание о возможности задать вопросы в чате и в зале.  

• Алексей делится, что много смотрит доклады по React.  

• Упоминает, что доклады Темы скрасили долгое путешествие.  

• Переход к докладу Темы.  

• Тема приветствует участников и объясняет, что доклад будет о рендеринге Next.js.  

• Упоминает о своем опыте работы в Кинопоиске и планах по возрождению телеграм-канала.  

• История изобретения электродвигателя и его конкуренции с ДВС.  

• Переход к обсуждению Next.js и его преимуществ.  

• Описание роутинга, работы с кэшем и оптимизаций в Next.js.  

• Упоминание о поддержке фич из Canary и их быстром внедрении.  

• Сравнение Page Router и Next.js Router.  

• Вопросы о средах рендеринга и способах рендеринга.  

• Описание клиент-сайт рендеринга в Page Router.  

• Плюсы: дешевизна, быстрые переходы, взаимодействие с историей браузера.  

• Минусы: нагрузка на устройство пользователя, медленный первый старт, отсутствие SEO.  

• Описание SSR в Page Router.  

• Плюсы: быстрая загрузка, хорошее SEO, отсутствие требований к устройству пользователя.  

• Минусы: дороговизна по ресурсам, плохая масштабируемость.  

• Описание SSR в Next.js Router.  

• Плюсы: быстрая загрузка, хорошее SEO, отсутствие требований к устройству пользователя.  

• Минусы: дороговизна по ресурсам, необходимость в мощных серверах.  

• Next.js позволяет объединить все подходы рендеринга.  

• CSS-in-Page CSP не является обязательным, но используется по умолчанию.  

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

• Пример с основной страницей и страницей Movie.  

• Страница Movie статическая, без динамических параметров.  

• Динамическая страница с параметром movie.  

• Проблема монолитности: загрузка страницы целиком на клиента.  

• Решение: стриминг, загрузка данных по частям.  

• Улучшение метрик за счет распараллеливания загрузки данных.  

• Проблема: компоненты работают на клиенте, даже если это не нужно.  

• Решение: реакция Server Components, рендерятся только на сервере.  

• Преимущества: упрощенная загрузка данных, отсутствие перерендеров.  

• Серверные компоненты рендерятся только на сервере, клиентские могут рендеряться и на сервере, и на клиенте.  

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

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

• A-роутер объединяет концепции стриминга и серверных компонентов.  

• Включает клиентский рендеринг, статический и динамический рендеринг, а также стриминг.  

• Серверные компоненты используются по умолчанию в 100% случаев.  

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

• Данные передаются от серверного компонента к клиентскому для интерактивности.  

• Проблемы возникают при добавлении клиентской логики, что требует использования директивы useClient.  

• Добавление клиентской логики может привести к ошибкам и ухудшению ситуации.  

• Важно грамотно разделять код на компоненты для оптимизации.  

• Композиция помогает оптимизировать использование серверных компонентов.  

• Псевдоайтели позволяют использовать контекст без проблем.  

• Компонент UserProvider может быть псевдорадителем, не влияя на распространение клиентскости.  

• Это позволяет использовать серверные компоненты без проблем.  

• Статический рендеринг используется для статических страниц и данных.  

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

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

• Статический рендеринг подходит для статических страниц и данных без динамических параметров.  

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

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

• Использование статических страниц для топ-10 в регионе.  

• Применение инжектора статических страниц для генерации параметров.  

• Уменьшение нагрузки на серверы и улучшение производительности.  

• Проблемы с загрузкой страниц из-за монолитного решения.  

• Использование стриминга для улучшения производительности.  

• Создание страниц-плейсхолдеров для быстрой загрузки контента.  

• Не думать о рендеринге, использовать фреймворк для оптимизации.  

• Не мешать кэшу, использовать стриминг и лоудинг жесты.  

• Грамотно составлять композицию компонентов для улучшения производительности.  

• Электромобили были в два раза популярнее ДВС в 1920 году.  

• В 1930 году электромобили проиграли, но в 2023 году Tesla Model Y стала самой продаваемой машиной.  

• Некоторые технологии опережают свое время, как Next.js.  

• Вопросы из чата и зала.  

• Использование Keynote для создания презентаций.  

• Проблемы с локальной разработкой и использование принудительного обновления кэша.  

• В медленных сетях загрузка страниц может быть сложной.  

• Потери данных и малое количество пакетов создают проблемы.  

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

• Нет универсального решения, нужно учитывать конкретную ситуацию.  

• Для внутреннего продукта рендеринг вперед не нагружает серверы.  

• Для внешнего рынка важно учитывать устройства от простых до продвинутых.  

• Пользователи могут быть готовы ждать, если это необходимо для выполнения задачи.  

• Пример: покупка фильмов в машине требует быстрой загрузки страницы.  

• Быстрое открытие страницы важно для пользователей в различных ситуациях.  

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

• Для внутренней разработки вложения в серверы могут быть нецелесообразными.  

• Важно инвестировать в полезные вещи, такие как CDN.  

• Время заканчивается, но обсуждение продолжится в дискуссионной зоне.  

• Приглашение к дальнейшему общению.  

• Благодарность участникам.