Задержка в интерактивности и серверные компоненты
Ну и последнее что меня жутко разражало в SSR, так это задержка в интерактивности. Особенно когда ты с телефона пытаешься что-то сделать.
Как это выглядит: ты открываешь сайт, он загружается, там есть формочка, ты на нее тыкаешь, но написать не можешь. И кнопочки есть, но не нажимаются. И ты стоишь как дурак и думаешь... о вечном.
А все почему? Да потому что сначала код рендерился на сервере и выплюнулся к тебе в телефон как HTML, а потом загрузился всё тот же гигантский кусок джаваскрипта и начал на клиенте рендерить виртуальное дерево что бы что? Чтобы сравнить его с этим HTML и если в HTML от сервера что-то не так — стереть его и отрендерить всё заново уже на клиенте. Кринж!
Благо не меня одного это бесило и за последние годы SSR продвинулся намного вперед.
Сначала классным стало делать код-сплиттинг и ленивую загрузку — ну типа отдавать минимально нужный код, а остальное догружать фоном. Но это работало средне, плюс не каждый хотел научиться.
Но потом появились они — серверные компоненты. Да, они не умеют в интерактивность, но за то код, который рендерит HTML этих компонентов, исполняется только на сервере и не поставляется на клиента. А значит никаких гидратаций, всё на полном доверии.
Серверные компоненты настолько круты, что умеют не только ходить в базу данных и даже отправлять запросы к другим бековым сервисам (пока вы смотрите на белый экран), но и включать в себя дочерние клиентские компоненты с интерактивом.
В общем серверные компоненты довольно крутая штука для всякого рода контента, который не меняется по желанию пользователя.
Самый простой пример применения — страничка блога: 🗯 заголовок, тексты, комменты — серверные компоненты 👤 кнопочки лайков и форма комментирования — клиентские компоненты
