Zero-Bundle-Size React Server ComponentsТак, React-компоненти на сервері. А що?Команда React розповіла, над чим працює зараз: Zero-Bundle-Size React Server Components - можливість писати компоненти, що рендеряться на сервері та не потрапляють у бандл.
Ось ідея: є код компонента, який ми відправляємо з сервера у браузер. Потім цей компонент з браузера звертається знов до сервера по дані, а після отримання даних код нарешті виконується, тобто, компонент рендериться.
То чому б не відправляти на клієнт самий результат роботи цього коду?Ціль: кардинально скоротити обсяг бандлу і покращити користувацький досвід.
Проєкт виходить з припущення, що значна частина ререндерингу(виконання відповідного JS-коду) стається тоді, коли застосунок отримує нові дані. Нові дані приходять з сервера, то чому б там і не відрендерити?
Ми продовжуємо думати про застосунок як про дерево Реакт-компонентів, але частина цих компонентів буде виконуватися на сервері. Хороші кандидати для виконання на сервері - компоненти, що отримуються дані, адже доступ до даних значно спроститься. Можна хоч до файлової системи, хоч до бази даних запити робити: на сервері усе під рукою.
Серверні та клієнтські компоненти спілкуються звичайним чином - через
props, але у спеціальному форматі. З’являється нове обмеження: від серверних компонентів до клієнтських через props можна передавати лише такі дані, що серіалізуються, тому, наприклад, від передачі функцій доведеться відмовитися. Також на сервері можна рендерити тільки не-інтерактивні частини.
Окрім коду самих серверних компонентів до бандлу не потраплять і його залежності (привіт,
lodash). Саме це означає
zero-bundle-zise у назві проєкту: серверні компоненти не збільшують бандл ані на байт.
Не плутати з SSR! Ці технології можна поєднувати, але вони різні.
Проєкт в стадії розробки, але команда Реакт вирішила поділитися зі спільнотою та запросити до обговорення.
Посилання на RFC https://github.com/reactjs/rfcs/pull/188
Демонстраційний репозиторій https://github.com/reactjs/server-components-demo
Рекомендуємо тред Софі Альперт з поясненнями https://twitter.com/sophiebits/status/1341098388062756867?s=20
