Next js 13 код клиентских компонентов отображается в коде страницы, почему?

Question

[Narts]

Привет! Изучаю Next.js 13, до этого разрабатывал только SPA. Насколько я понял, одно из преимуществ next.js - серверный рендеринг, когда компонент преобразуется в разметку или в объект (как в новом нексте) и отдается на клиент, где уже происходит инъекция, что полезно для сео - открывается страница с уже указанными тайтлами, тегами и контентом.

В next 13 есть два типа компонентов - серверные и клиентские, которые генерируются на сервере и на клиенте соответственно. И по логике (возможно неверной логике), клиентские компоненты работают по аналогии, как работает spa приложение - рендеринг только после того, как вся страница и банлд загрузились.

Но я заметил, что контент клиентских приложений отображается в коде страницы (не в дев тулзах, а именно в index.html). получается, что клиентский компонент собрался на сервере, гидрировался в index.html и отправился на клиент при первом же get запросе. Почему так? Разве в index.html не должно вместо клиентского компонента быть какой-то пустой див (условно), в который потом гидрируется наш клиентский компонент, когда страница загрузится?

Comments

[godsplan]

(возможно неверной логике)

так и есть.
Возможно это сбивает с толку, согласен.
Но насколько я знаю клиентские компоненты в нексте это компоненты которые могу меняться с клиента , условно (useState). При этом они так же собираются на сервере и отдают статику.

Но я не эксперт, так что мб кто-то поправит.

[MeSuDDen]

Привет, сейчас столкнулся с таким же вопросом как и ты. Тоже было интересно разобраться в этим серверных и клиентских компонентах и почему так происходит. Решил закинуть твой вопрос целиком в GPT. И он дал хороший ответ, который помог мне разобраться. Вдруг у кого-то еще появится такой вопрос.

Ответ:
Основное преимущество Next.js — серверный рендеринг, что полезно для SEO: страницы открываются с готовыми тайтлами и метатегами. В Next.js 13 есть два типа компонентов: серверные (рендерятся на сервере) и клиентские (рендерятся на клиенте).

Интересно, что клиентские компоненты тоже могут предрендериться на сервере. Это значит, что даже клиентский компонент может быть включен в HTML страницы, который потом гидрируется на клиенте. Это улучшает производительность и SEO, так как контент доступен сразу.

Хотя клиентские компоненты работают аналогично SPA, предрендеринг на сервере позволяет Next.js обеспечить быструю загрузку страниц и хорошую индексацию поисковыми системами. Этот подход сочетает преимущества как SSR, так и SPA, обеспечивая лучшую производительность и удобство для пользователей.