Одни из самых популярных кейсов использования React.lazy + Suspense — динамическая загрузка отдельных страниц или тяжелых библиотек.

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

👨‍💻  Для подобных сценариев можно собрать компонент-контейнер с Suspense+ErrorBoundary, который будет показывать процесс загрузки и отлавливать ошибки независимо от уровня вложенности remote-модулей.

Пример итоговой структуры смотри в картинках 😉

P.S.: Не забываем логировать ошибки в ErrorBoundary! 📊

#react #microfrontends #lazy #js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs