Предзагрузка данных через роутинг

Осенью 2022 года React Router научился делать асинхронные запросы на сервер при переходах между SPA страницами. Разбираемся как это можно сделать.
Код из видео github.com/michey85/youtube-r...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@stepankizim3277]

Ваш канал сокровище для Junior dev

[@raufhashimov241]

И не только для джуна :)

[@threehundredbucks3212]

@@raufhashimov241 сильно сомневаюсь, что НЕ джун станет смотреть ролик по новой фиче, вместо того-чтобы открыть оф доку )

[@Romul3003]

Ахренеть! Я не успеваю за всем этим фронтэндом) Спасибо!

[@mkonin]

Присоединяюсь. Ток к одному привык уже новое

[@user-mh9pe4zp6l]

Век живи, век учись Быть разрабом зашибись

[@biLLie_wiLLie]

Я два выпуска назад попросил Михаила рассказать про это обновление и он меня услышал)

[@dimalukashenko4865]

Хороший урок, очень ждал продолжения курса

[@yuriyovdeyev685]

Здорово, очень полезная инфа и подача отличная! Спасибо!

[@6azinga]

Спасибо огромное за то, что Вы находитесь на острие технологий front-end!

[@user-tk7qv9rv2c]

Спасибо! Буду следить за каналом, чтобы следить за новинками)

[@user-vm2db5cq1g]

Очень интересное видео! Спасибо за курс по v6 реакт роутеру!)

[@offiza8631]

Спасибо большое за такое полезное видео!)

[@Konstantin19877]

Очень круто. Спасибо за контент.

[@irinal7766]

Спасибо, очень своевременное для меня видео)

[@victormog]

Шикарное видео!

[@dmitryts9093]

Спасибо за Ваши видео

[@user-xf3xe1gz1x]

Михаил, контент потрясающий

[@romuelson]

Отличная декомпозиция 🤠

[@user-bl4te2kg8v]

Супер. Спасибо большое

[@user-rz1hy7xg7o]

Как по мне, Роутер слишком много на себя пытается взять. Кастомный хук по получению данных гораздо легче по написанию, понимаю, скорости загрузки...

[@_Black_Mirror_]

Спасибо за разбор новых возможностей. Пользоваться я этим не буду. Новый синтаксис никакой пользы не несет

[@dimondmarcker3179]

на самом деле теперь v6.4 очень похожа на remix, в плане всех этих лоадеров, Form и т.д. в теории это может полностью изменить подход к разработке некоторых приложений хочется еще больше видео про react-router-dom v6.4!

[@oops61rus]

судя по странице ReactRouter там справа вверху прям отсылка идет к Remix, так что вполне вероятно

[@kujojotaro3464]

Это и есть remix

[@olegkravchenko9655]

Если внимательно посмотреть на имена авторов того и другого, то всё станет понятно ;)

[@user-eb5yw9ui6o]

спасибо!

[@ufc_uz6]

Супер

[@zoombix5753]

Можно ещё роликов по новой версии роутера?)) Там линки обновили с ними немного не ясно(

[@user-or7bl8yu2m]

Он Гений

[@it.s_vlad]

для тех, кто не понимает, зачем нужен loader: - без использования loader - сначала загружается компонент, потом после его рендера начинается загрузка данных в useEffect. - с использованием loader - компонент и данные загружаются параллельно.

[@nevrox6197]

Но в таком случае отстутсвует lazy loading и клиент не видит ничего,немного не понятен плюс этого подхода,кроме того что не подтягиваются хуки реакта

[@NovikovEugene13]

Просто прописываешь if (!data) return null и не паришься насчёт лишнего рендера (выполнения функции компонента)

[@oleksiikriuchkov7399]

Такой подход очень ускоряет загрузку!🥰

[@superboba2007]

на мой взгляд в случае с использованием с defer получается какое то трудно читаемое нагромождение кода всего лишь для того, что бы показать компонент Loader. почему бы для этой задачи не сделать хук и использовать его вроде: const { data, loading, error } = useFetch("...") ?

[@user-rz1hy7xg7o]

import {useCallback, useState} from 'react'; const useRequest = (promise: (...args: TParams) => Promise) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const run = useCallback((...args: TParams) => { setData(null); setLoading(true); setError(null); promise(...args) .then((response) => { setData(response); setError(null); }) .catch((error: Error) => { setData(null); setError(error.message); }) .finally(() => { setLoading(false); }); }, [promise]); return {data, loading, error, run}; }; export default useRequest;

[@SkyAndStarss]

а можно ли подход с роутер лоадером соеденить с редакс тулкитом??

[@adamburke4496]

А есть ли кэширование в данной версии роутера?

[@singlebw4065]

Здравствуйте Михаил. Как создать бесконечный роутер?

[@vitaliynoveles6626]

Спасибо за видео) Подскажите, пожалуйста, какая у вас тема стоит?)

[@mishanep]

Codesandbox

[@CyberGenius777]

Не знаю насколько это нужно. Геморроя только добавили. Будет ли этот функционал кто-то реально использовать и переписывать все - неизвестно

[@Aleksandr_Bolshakov]

Уроки супер, но расскажи как организовать проект вместе с отдельным npm пакетом в котором находятся компоненты и импортируются в проект

[@CJIu3eHb]

Интересно, а если без defer, то как отрисовать лоадер на зависшей (пока данные грузятся) странице, с которой идет переход. Чтобы люди понимали, что нажатие на кнопку/ссылку сработало и что-то делается.

[@andreyyastrebtsov4367]

useNavigation там есть хук и у него состояние есть. Ну тоесть используем так const navigation = useNavigation(). И там уже цепляемся navigation.state === 'loadiing и рисуем что надо

[@tweeker2104]

А возможно ли использовать useLoaderData в typescript? А то я пробую, а оно ругается на типы. В документации react-router-dom ничего не нашел об этом (ну или плохо искал :) )

[@mishanep]

В файлах декларации возвращаемый тип для этого хука идет как unknown. Поэтому, по логике, надо подготовить свой тип и указать его. const data = useLoaderData() as MyType

[@Asgyr]

@@mishanep Спасибо очень помог ваш ответ !)))

[@user-pp5vl3ls5e]

Как совместить это с reduxjs/toolkit, если мы обычно в toolkit вызывали асинхронную функцию через createAsyncThunk и через dispatch вызывали нужный нам reducer и записывали данные в state, а уже через redux-react используя useSelector передавали данные? Как я понял, сейчас мы данные получаем через useLoaderData помимо reduxjs/toolkit

[@user-mh9pe4zp6l]

Лучше не надо совмещать, обычно редакс нужен для управления состоянием каких-то больших данных, а предварительная загрузка react-router-dom для получения и отрисовки небольших. Ну а вообще для больших проектов данная фича выглядит как оверхед, ибо редакс или что-нибудь другое для state manage (например, react-query) прекрасно справиться без помощи библиотеки, которая в первую очередь нужна для роутинг, а не для предзагрузки

[@user-yg8nh2ek6w]

Автор, скажите что такое "эндерфугнансы " на 19:18 (по таймлайну) ?

[@mishanep]

😄😄😄 Звучит смешно. Переслушал несколько раз и сам не пойму)) Ума не приложу откуда вылезло))

[@user-yg8nh2ek6w]

@@mishanep да и пофиг, все равно ты молодец😃

[@Napolion4ik]

На 23:15 вы не писали return defer ({...}), он обезателен или можно обойтись await-ом в return-e

[@The14Some1]

Интересно, вы уже досмотрели до конца, или всё ещё ждёте ответа? :)

[@Napolion4ik]

@@The14Some1 хаххаха смешно))досмотрел до конца )забыл удалить коментарий

[@user-uz8qg6hf8p]

Про try catch не забываем

[@FOND645]

Подскажите, дружит ли React Router Dom с Electron?

[@mishanep]

У меня пока не было опыта работы с Electron.

[@user-irinaais90]

Расскажите, пожалуйста, как писать вложенные роутеры по версии React Router 6.4 с помощью createBrowserRouter

[@user-sp8ty2ol8m]

лично я в children роутах ещё одни чилдрены делаю и outlet-ом выбираю что где отрисовывать, возможно это не правильно, но оно работает, я буквально сегодня проверял. В крайнем случае почитай доку

[@user-irinaais90]

@@user-sp8ty2ol8m спасибо

[@unknownrus920]

Я может что упустил, но в чем преимущество перед просто загрузкой контента через useEffect при переходе на страничку?

[@exsterx]

тот же вопрос. я храню состояние в recoil без перезагрузки страницы - ранее подгруженные данные открываются мнгновенно фишка - дрочево ради дрочева

[@CyberGenius777]

@@exsterx Согласен, ненужный гемор. Может это как-то влияет на производительность, что навряд ли... В общем, ненужная фишка

[@d0paminer]

useEffect триггерит сайд-эффекты после рендера.

[@exsterx]

@@d0paminer раскройте подробнее, что вы имеете ввиду

[@The14Some1]

@@exsterx Ну как минимум один дополнительный draw call

[@limpchh]

Чем тогда отличается загрузка постов через useEffect и defer. Ведь и там и там можно показывать лоадер, отличается только реализация

[@mishanep]

Создатели библиотеки с роутингом просто предложили нам разделить логику получения и потребления данных.

[@limpchh]

@@mishanep Понял, спасибо за ответ)

[@sevgenberg585]

{request,params} выдает ошибку, Unhandled Thrown Error! _ref is undefined делал все по видео!Что это может быть?

[@user-ul4jn2cj3r]

Как это будет работать с redux? Приходящие данные надо будет через стор обрабатывать?

[@mishanep]

Здесь могут быть разные сценарии поведения. В базовом варианте можно обойтись без складывания в стор. Здесь скорее вопрос, как избежать повторных запросов. На данной стадии вариантов кэширования из коробки не видно. Как подружить с лоадер с редаксом - вопрос, я пока не пробовал =)

[@user-tj8yn5tl2h]

Думаю если вам не нужны эти будут данные в другом компоненте. То их не стоит пробрасывать в стор redux. Бывает ситуации когда вам надо только получить и отрисовать данные и больше не где не использовать. Пока всё лишь предположение. Но всё равно очень полезный инструмент. Надо пробовать использовать в проекте.

[@ramilnazmiev9448]

Подскажите как тема в VS называется ?

[@mishanep]

CodeSandbox

[@kinafermur]

Михаил, а вы не поделитесь статейкой где откопали такой способ получения данных, или копались в документации? очень интересно, круто что технология не стоит на месте

[@mishanep]

Изначально я узнал об этом в их release notes, которыми библиотека поделилась ещё на стадии беты. А дальше через документацию.

[@Wra-ij8yk]

Подскажите этот курс еще актуален?

[@mishanep]

Видео свежее, так что актуально. Но зависит от того, какую версию библиотеки вы в своем приложении используете. Там есть различия между версией 5, 6 и 6.4. В рамках плейлиста разбирается 6-я версия и последние дополнения, начиная с 6.4.

[@lesters]

спасибо за актуальную инфу, скажи а почему ты не используешь стандартную запись export default ComponentName ?

[@mishanep]

Иногда использую и экспорт по умолчанию. Не согласен, что это стандартная запись. Многие библиотеки в качестве стандарта как раз используют именованный экспорт. Но для проекта это вопрос привычки и соглашений внутри команды.

[@Napolion4ik]

Не много не понимаю какие плюсы дает этот метод предзаргрузки, да я сам когда то думал, а почему нельза передавать какие то данные по роутер после клика, всеравно под скелетом у нас используеться useContext , но разработчики что-то перемудрили

[@Maximurz1k]

Пример понятный но не продакшн) Покажите плз пример с RTK Query)

[@mishanep]

Так это же два разных подхода. Может быть со временем другие библиотеки предложат нам интеграции под возможности роутинга, пока она сырая.

[@Maximurz1k]

@@mishanep Ну пока это первый заход "быть похожим на ангуляр" ну наконец то))) Ток в ангуляре можно было в резолвере сервисы подсосать. Это же тема не только для резолвинга данных, но еще и гвардинг доступов. Я вижу проблему в том, что нет четких паттернов "как делаем", просто сделали и в путь) Ну, будем вырабатывать

[@redhook777]

В продакшене ведь чаще всего next

[@Maximurz1k]

@@redhook777 1) причем тут ssr 2) "чаще всего" это где? крупняк редко его использует, чаще свое. и большинство SPA это внутрянка где ssr не нужен

[@FailValiev]

А если заново надо получить данные?

[@nikitasafonkin3077]

перегружать компонент🤔

[@vty4261]

@@nikitasafonkin3077 useRevalidate()

[@user-fn4jw5nc3z]

Да роутер многое на себя забирает из функционала, не думаю что многие будут этим пользоваться, скорее тем что привычнее

[@xlebuwek1]

Add text 12:44

[@constantine6464]

как раз когда реакт получает новый нативный хук use

[@ilovekurut]

ох да запутаться можно.Пока одно выучишь, другое учить надо. И не понятно что на интервью спросят.Поэтому учим все подряд

[@vitmih380]

И что это дало? Лишь бы было.

[@vo_skor]

Основой принцип реакта - декомпозиция. И когда встретишь это на проекте после чувака который любит декомпозировать декомпозированное, не потеряешься 😁

[@alexandrd419]

Если вы использовали angular, то расскажите почему react лучше? Ну кроме как простоты и количества вакансий. Помоему ангулар куда логичнее. верстка от логики отдельно, модульный подход. Есть сервисы. Компоненты верстать может верстальщик, без знаний js/ts. Все есть из коробки, и никаких там а мы на проэкте используем мобх, или еще чего. Хотя и простота тоже такое.... если взять ts, rxjs, redux(и всякий другой зоопарк), webpack, то тоже получается не так уж и просто. Просто учу angular. Мне нравится. Все из коробки. нормальный ооп. но вакансий на него значительно меньше. Вот думаю не зря ли его осваиваю? Хотя посмотрел в сторону реакт. Какая-я то ерунда и все вперемешку.

[@mishanep]

Я не работал с Ангуляром. Касаемо Реакта, то здесь от проекта надо плясать. Не каждый проект нуждается в роутинге на стороне клиента, не всегда нужен Redux и его аналоги, многие проекты спокойно обходятся и без ts, что удешевляет разработку и снижает порог входа.

[@drunken_rubbish]

В ангуляре зачастую ориентироваться сложнее, сам rxjs тоже весьма неприятная и сложная штука. На реакте в целом многие моменты делаются гораздо проще, на реакте больше выбор библиотек, на реакте лучше можно контролировать ререндеры. Да и он банально легче и меньше. Это его основные плюсы. У ангуляра, то что многое с коробки и то, что в модульном подходе код выглядит красиво, правда до первого взаимодействия с rxjs)))

[@denissaripov7130]

Реакт даёт просто функцию, которая возвращает html и если возвращает то же, что и в прошлый раз - оптимизирует Под капотом ангуляра непонятно что, много декларативности и нужно запоминать какие-то решения тк так придумали разработчики Любой чел, знающий js, на реакт за день пересядет, а вот на ангуляр врятли

[@richardvoronov3482]

Ничем реакт не лучше. Инструмент всегда хорош, когда он в правильных руках. Реакт это библиотека, и его нужно уметь готовить. Ангуляр это фреймворк, свободы чуть меньше чем с реактом в плане композиции приложения и от этого код должен быть выше качеством, чем то что пишут на реакте. Реакт просто популярней ангуляра, поэтому его выбирают чаще, от того и вакансий больше. Мало где можно встретить хороший код на реакте как раз из-за того что библиотека не ограничивает разраба ни в чем, кроме не сложных правил написания хуков. Если это большая компания, вероятно, у них есть деньги нанять программистов, если это стартап или средняя компания то, вероятно, они уже наняли "реакт разработчиков", а не программистов. Так что, если хотите поскорее на работу, берите реакт и вперед, если уже освоили реакт попробуйте ангуляр.

[@The14Some1]

​@@denissaripov7130 Блин, а тут, типа, придуманные разработчиками решения не нужно запоминать? Вот, мы прям сейчас обсуждаем последнюю версию роутера, который уже в третий раз значительно меняет парадигму своей внутрянки. У меня уже голова идёт кругом от редакса, редакс-квери, редакс-санк, ртк-квери и роутера разных версий.

[@sergeysharapov5945]

компонент уже стал каким то грязным и похоже на страницу php с ajax подгрузкой где нужно )

[@everemchuk]

Ну это еще тот бубен. Ничего нового данные изменения не принесли, только опять проблемы с новой стандартизацией и структурой проекта. Как по мне ничего лучшего чем ReactQuery или же Redux + RTKQuery не придумали. Я думаю что в будущем данная фишка не получит своей популярности, и будет просто как заглушка в библиотеке

[@lesters]

ну и есть смысл убирать юзстейт и прочие для замены их на роутинг, он что жрет меньше памяти? или это просто альтернативный подход?

[@mishanep]

Здесь скорее история не про память, а про разные уровни абстракции. У нас, к сожалению или может быть к счастью, слишком много вариантов делания одного и того же. Касаемо производительности я не замерял, не отвечу. Но в теории должно быть быстрее.

[@raufhashimov241]

Какой редактор?

[@user857ho8t]

vs code

[@user-rz1hy7xg7o]

Берите на заметку классный хук, на подобии useFetch, который поддерживает параметры и гораздо легче всей этой дичи с React router. import {useCallback, useState} from 'react'; const useRequest = (promise: (...args: TParams) => Promise) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const run = useCallback((...args: TParams) => { setData(null); setLoading(true); setError(null); promise(...args) .then((response) => { setData(response); setError(null); }) .catch((error: Error) => { setData(null); setError(error.message); }) .finally(() => { setLoading(false); }); }, [promise]); return {data, loading, error, run}; }; export default useRequest;

[@worldandplanet8715]

Спасибо, очень своевременное для меня видео)