Выбор ответа Middle React 18-19: Suspense, transitions, RSC обновлено
Функция из серверного компонента в клиентский
Вопрос
Серверный компонент передаёт в клиентский <LikeButton onLike={() => console.log('like')} />. Что будет?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Ошибка: пропсы на клиент сериализуемы, функцию не передать. Граница сервер-клиент передаёт данные по сети.
Варианты ответа
- Функция выполнится на сервере при клике, React сам отправит запрос
- Всё сработает: исходный код функции скопируется в клиентский бандл
- Функция выполнится в браузере после гидрации клиентского компонента
- Ошибка: пропсы на клиент сериализуемы, функцию не передатьправильный ответ
Разбор
Граница сервер-клиент передаёт данные по сети. Сериализуемы примитивы, простые объекты и массивы, Date, JSX, промисы и серверные функции (с 'use server'). Обычное замыкание сериализовать нельзя, React выдаст ошибку. Обработчик нужно определить в самом клиентском компоненте или передать серверную функцию.
- Сервер не может «выполнить функцию при клике» без явной серверной функции.
- Код функции в бандл не копируется.
- До браузера функция не дойдёт.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «React 18-19: Suspense, transitions, RSC»
- Автоматический батчинг
- useDeferredValue и debounce
- Что запускает Suspense
- Transition для значения поля
- use в условии
- Промис, созданный в рендере, и use
- Что значит use server
- Ошибка гидрации