React Server Components е експериментална функция, пусната през декември 2020 г., тя е нещо като смесица от изобразяване от страна на клиента (CSR) и изобразяване от страна на сървъра (SSR). Но как ги смесва е това, което ще проучим в тази публикация.
ОТКАЗ ОТ ОТГОВОРНОСТ: Тъй като сървърните компоненти на React са все още силно експериментални и се актуализират от време на време, тази публикация може да не е правилна след юни 2021 г.
CSR срещу SSR
Битката между КСО и РСБ никога не свършва и има масивни статии и дискусии за анализ на плюсовете и минусите им. Като софтуерен разработчик/архитект, стартиращ чисто нов проект, винаги може да се изправите пред дилемата да изберете кой да използвате, когато няма наследство или зависимости от миналото. Но ако преосмислим проблема, всъщност не трябва да избираме само един от тях, а да използваме и двата за това, което правят по-добре в сравнение с другия. Моят личен съвет за вземане на решение е:
CSR за интерактивност, SSR за извличане на данни.
CSR е близо до потребителите, така че когато става въпрос за нещо, от което се нуждаете, за да взаимодействате с потребителите възможно най-бързо и дори да не включва извличане на данни от сървъра, използвайте повече CSR, тъй като работи в браузъра и осигурява най-добрата интерактивност.
SSR е близо до хранилището на данни, така че когато става въпрос за извличане на данни от хранилището на данни, изчисляване и представяне на изгледи на потребителите. Използването на SSR потенциално може да спести малко време за мрежово предаване и да изпраща само критични данни до потребителите.
Има и други важни теми, които често се споменават (като SEO), когато сравняваме КСО и РСБ, тук няма да преразглеждам теми, искам да го запазя просто и да подчертая само някои основни характеристики.
Технически използването на CSR и SSR заедно е напълно осъществимо, но разходите за поддръжка на такава хибридна парадигма като цяло са високи и изглежда невъзможни, ако предпочитате по-чиста интерфейсна архитектура. Но с React Server Components може да е по-възможно да се внедри хибрид на CSR и SSR frontend по подходящ начин с ниски разходи за поддръжка.
Как работят компонентите на React Server
За да разберете основите на сървърните компоненти на React, силно се препоръчва да гледате видеоклипа ТУК.
В конвенцията за компонентите на React Server компонентите се разделят на *.server.js и *.client.js, за да посочат къде се изпълняват. Използването на компоненти *.server.js може да ускори извличането на данни (тъй като е близо до хранилището на данни) и да намали размера на пакета (някои js библиотеки без изглед, като moment.js, няма да бъдат изпратени до страната на клиента). А за *.client.js компонентите всъщност те са точно като всички реагиращи компоненти, които сте написали преди, но могат да бъдат безпроблемно интегрирани с *.server.js компоненти, което е огромен плюс. Но как тези ползи идват технически от това е ключовата тема, която ще обсъдим по-нататък.
За да изследвате магията отдолу, добрата отправна точка е хранилището server-components-demo. След клониране, стартиране и игра наоколо, едно нещо, което бързо ще откриете в мрежовия отговор, е, че API /react се извиква, когато има някои взаимодействия във фронтенда.
Отговорът на този API е доста интересен, тъй като изглежда като сериализирана версия на реагиращите компоненти:
Това ни дава предположение, че сървърните компоненти могат да изпратят на клиента в сериализиран формат в JSON. Подробностите могат да бъдат намерени в пакета react-server в реактивното хранилище:
С една дума, компонентите *.server.js всъщност са компоненти, които се изобразяват от страната на сървъра и изобразеният резултат се сериализира и изпраща на страната на клиента във формат JSON. Което означава, че не можете да използвате функции (вкл. манипулатор на събития), препратки и повечето кукички в *.server.js компоненти, тъй като те не са в същия контекст като *.client.js компоненти.
Заключение
Според мен мисля, че React Server Components е нов експеримент за разбиване на силоза между CSR и SSR. Това не означава да се замени някой от тях, а да се даде възможност на разработчиците да могат да извлекат най-доброто от двете. Не е известно дали може да стане популярна функция, но поне като разработчици можем да имаме нов избор и начинът, по който се прилага, също може да бъде добра референция за всякакви бъдещи рамки с подобна цел.
