React Router + lazy загрузка компонентов роутов @EasyITChannel

[@marpusik1277]

спасибо 😇

[@johngalt9494]

8:40 - Что значит "Suspense берёт на себя реакт-роутер"? Как нам указать пролоудер при работе с ".lazy", если он не дружи с "Suspense" ?

[@EasyITChannel]

При использовании "нового" React Router решается это немного по-другому. В планах есть доснять последний ролик в этом цикле с объяснением как раз этого момента. Если кратко - нужно использовать функцию defer из react-router для возврата данных и компонент Await внутри Suspense. Примечание: это не работает с SSR.

[@johngalt9494]

@@EasyITChannel Понял спасибо, но эта реализация подходит для функции "lazy()" (из реакта), а не для ".lazy" (из роутера). А можно ли как -то сделать фалбэк (прелоудер) с использованием проперт ".lazy()" из роутера?

[@EasyITChannel]

Конечно, я как раз об этом написал выше. Нужно использовать defer при возврате данных в роуте. А в компоненте нужно использовать Await внутри Suspense.

[@johngalt9494]

@@EasyITChannel 1) В актуальной версии роутера (7+) функции "defer()" нет (её удалили), вместо неё используются обычные промисы. Честно говоря я даже не понял зачем она нужна была. 2) Т.е. реализовать эфект прелодера (fallback) при использовании проперти ".lazy()" марушрутера для загрузки компонента-страницы точно-такая же как без ".lazy" (Через и "import()" или через "React.lazy()" и "import()"). В связи с этим вопрос: 3) Получается проперти ".lazy()" маршрутера нужно использовать только тогда, когда мы хотим лениво подгрузить значения для каких-то других проперти маршрутера кроме ".element", т.к. для ленивой подгрузки только ".element" он бесполезен? (т.к. мы всё равно вынуждены использовать и "import()" или через "React.lazy()" и "import()")

[@EasyITChannel]

@@johngalt9494 Скоро будет видео, в нем всё подробно расскажу.

[@stasostrin47]

Автор только начинает , так что давай продолжай! Из минусов - нужен сценарий, нужна теоретическая база в видео. Это все для того что бы было понятно что делаешь в принципе, а не на конкретном примере, а то сложно вникать в проект вникая с этого видео. Да и не понятно как понять что наш lazy работает и в чем плюс

[@EasyITChannel]

Спасибо за просмотр и за ценные советы. Сценарий используется, цели рассказать обо всем на свете в одном 10 минутном видео не стояло. Цель большинства видео - на конкретном работающем примере показать решение какой-то задачи. Это отправная точка для собственных исследований по теме. Если Вы не понимаете о чем вообще речь, то возможно эта тема не для Вас.

[@stasostrin47]

@@EasyITChannel в том то и дело - что слишком конкретно, конкретный проект с конкретными файлами с конкретным названием ) сделай более общее хоть немного и будет отлично )

[@EasyITChannel]

Ну тут некоторое противоречие в Ваших рассуждениях. Любой проект конкретный. Файлы, названия, данные... Какой бы кусок кода я не придумал, он будет конкретным и для 100% проектов (которые тоже конкретные) не подойдет без осмысления со стороны разработчика. В этом и предыдущем ролике по сабжу рассказывается как с православного, много лет существующего, такого родного для большинства разрабов, подхода перейти на относительно новый. Быстро и с минимумом усилий. Особо хорошо это проявится на следующем шаге, когда SSR добавим. Тут буквально - делай раз, делай два. Это рецепт, такой формат видео. Если очень нужно объяснить что такое лейзи лоадинг, для чего, и почему (желательно) его прикрутить - это надо отдельное видео снимать.

[@ЭрикХасанов-ы2ю]

Привет, спасибо за разбор, есть такой вопрос: Не видел ли ты такого, что после загрузки страницы, в фоне подгружались все остальные страницы. Мне это нужно например для анимации переключения страниц, а с lazy load там лоадер и эффекта не видно..

[@EasyITChannel]

Добрый день. Ну подгрузить компоненты в фоне не сложно. Достаточно воспользоваться тем же динамическим импортом, как внутри функции lazy. Другое дело, что там же еще и данные вероятно грузятся? Чтобы страница загрузилась до фактического получения данных нужно использовать defer, компоненты Await и Suspense. Я об этом тоже расскажу, но по плану после SSR.

[@jonyonee]

В react router 6 для lazy роутоа suspense не нужен?

[@EasyITChannel]

Добрый день. Если делать как в ролике - то нет. Компонент загружается до начала рендера и следовательно Suspense не требуется. Сложности могут возникнуть если нужно показать скелетон лоадер или спиннер. Тогда нужно делать немного по-другому и следовательно понадобится и Suspense, и Await.

[@jonyonee]

@@EasyITChannel При lazy load страниц если загрузилась страница и при последующих переходов к нему уже с кэша будет взята да?