React Suspense в трех различных архитектурах

React Suspense прошел странный путь: в течение многих лет он мало использовался и считался малопригодным, просто причудливым способом отображения состояния загрузки. Однако с недавним выходом React 18 Suspense предоставляет целый набор новых преимуществ, которые заслуживают того, чтобы взглянуть на них еще раз. К сожалению, эти преимущества могут варьироваться от неинтересных до эзотерических и существенно зависят от архитектуры вашего приложения. Давайте рассмотрим три наиболее распространенные на сегодняшний день архитектуры рендеринга и то, какую роль в них может сыграть React Suspense.

Client-side rendering: Показывайте фаллбэк во время загрузки React.lazy; декларативно обрабатывайте состояния загрузки/ошибок при получении данных с помощью suspense-совместимого фреймворка.

Server-side rendering: Все вышеперечисленное + серверные компоненты, обернутые в <Suspense />, выборочно гидрируются на клиенте.

Server components: Все вышеперечисленное + асинхронные серверные компоненты, обернутые в <Suspense />, передаются клиенту поэтапно: сначала это fallback, затем - финальный контент.

А теперь более глубокое погружение!

https://elanmed.dev/blog/suspense-in-different-architectures

✍️ @React_lib