Задержка в интерактивности и серверные компоненты

Задержка в интерактивности и серверные компоненты

Ну и последнее что меня жутко разражало в SSR, так это задержка в интерактивности. Особенно когда ты с телефона пытаешься что-то сделать.

Как это выглядит: ты открываешь сайт, он загружается, там есть формочка, ты на нее тыкаешь, но написать не можешь. И кнопочки есть, но не нажимаются. И ты стоишь как дурак и думаешь... о вечном.

А все почему? Да потому что сначала код рендерился на сервере и выплюнулся к тебе в телефон как HTML, а потом загрузился всё тот же гигантский кусок джаваскрипта и начал на клиенте рендерить виртуальное дерево что бы что? Чтобы сравнить его с этим HTML и если в HTML от сервера что-то не так — стереть его и отрендерить всё заново уже на клиенте. Кринж!

Благо не меня одного это бесило и за последние годы SSR продвинулся намного вперед.

Сначала классным стало делать код-сплиттинг и ленивую загрузку — ну типа отдавать минимально нужный код, а остальное догружать фоном. Но это работало средне, плюс не каждый хотел научиться.

Но потом появились они — серверные компоненты. Да, они не умеют в интерактивность, но за то код, который рендерит HTML этих компонентов, исполняется только на сервере и не поставляется на клиента. А значит никаких гидратаций, всё на полном доверии.

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

В общем серверные компоненты довольно крутая штука для всякого рода контента, который не меняется по желанию пользователя.

Самый простой пример применения — страничка блога: заголовок, тексты, комменты — серверные компоненты кнопочки лайков и форма комментирования — клиентские компоненты

#React #SSR

© Счастливый тимлид