Как сделать Loader / Skeleton для серверных компонентов
Вставка
- Опубліковано 25 чер 2024
- NextJS Streaming - это хитрый трюк от создателя NextJS для отрисовки скелетона пока происходит await серверных компонентов. Мне идея очень понравилась
Ссылка на телеграмм канал
t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
UA-cam: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:35 Loader для серверных компонентов
02:35 Как это работает
05:10 Парочка нюансов
06:33 Подпишитесь!
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Видео классное, побольше бы раскрыть тем про NextJS)
Я вообще не против NextJS, но кажется большинству эта тема не очень интересна :(
@@it-sin9k скорее всего это из-за того что тема немного сложнее реакта и большинство отвергает то, чего не понимает) Но такие видео как раз и нужны для того чтобы помочь разобраться и в технической части, и вообще ответить на вопрос почему Next так хорош и почему его нужно изучать
@@it-sin9k наоборот, очень интересно)
@@it-sin9kнаоборот очень интересна)
Не, точно нужно и интересно! Больше, больше Next’a!
Спсибо , братик. Побольше про Nextjs пожалуйста, особенно про server components, server action и вот эти все магические фичи.
Спасибо!) но честно скажу, статистика просмотра NextJS видео совсем удручяет) Проводил даже опрос в ТГ канале актуально ли еще делать видео про NextJS)
@@it-sin9k На каждый товар есть свой покупатель. Мне например интересно.
Видео точно заслужило лайк!
Ооо вот теперь кайф, я понял зачем нужен стриминг! Спасибо ❤
контент в кайф вообще красавчик
Спасибо! будем продолжать)
Спасибо за видео!
Спасибо, про loading.jsx не знал! Теперь знаю чуть больше :)
гарний формат і виділений час на конкретний кейс
интересный контент, качественная подача контента + стерео звук в начале на заставке классный. Вы профи!
Спасибо! Надеюсь найдете для себя еще много интересного контента!)
Видео понравилось. Было интересно увидеть во что превращаются серверный компоненты в браузере.
Топовый инженерный контент!
Таких каналов мало.
Спасибо!) Надеюсь найдете еще много всего интересного на канале)
Видео точно заслужило лайк, и даже не один)
Спасибо за видео
Очень крутой контент
Топовый контент как всегда, респект за nextjs 🧊
Работаю на Вью, но все равно было интересно, спасибо❤
Спасибо
очередной "гениальный" костыль от Versel...
Отличный ролик! Спасибо!)
Любопытно:
1. По сео уже поднимали тему и вроде люди пишут что дождутся боты поисковиков, но будут ли они отмечать что сайт долго отвечает и индексировать реже?
pagespeed, lighthouse упадут показатели? первый ответ быстрый, но то что нужно юзеру пришло через 3-5 секунд?
2. Это браузер напрямую с нодой общался без проблем тайминга и тд. Как ведет себя в бою когда между ними nginx? WAF?
3. При переходе между страницами как это все работает? Пропсы и компоненты как-то синкаются? В старых версиях на любой запрос пропсы страницы тянулись полностью, а тут?
4. Redux, Mobx и т.д. с такими подходами все еще нужен? Или будут уходить от этого всего?
Спасибо за большой комментарий!)
1. да, показатели конечно же упадут) но чтобы улучшить эти метрики, нужно использовать еще кэширование серверных компонентов) про это думаю еще отдельное видео сделать)
2. В конечном итоге, все равно все клиенты общаются с нодой напрямую, поэтому думаю результаты будут те же. Если конечно не будет специальных настроек о разрыве соединений
3. Если даже полазить по страницам разным на официальном сайте. В некоторых страницах есть перезагрузка страницы, а в некоторых нет. Значит существуют как минимум несколько стратегий :)
4. Кажется тот же Redux уже не очень хорошо работает с этим всем. Но есть отзывы про другие стейт менеджеры, которые лучше справляются. Поэтому думаю они останутся, но возможно перейдем на другие инструменты)
@@it-sin9k благодарю за полный ответ!) Ждем новые видео!)
интересно как это скажется на сео
Скорее всего индексирующий бот нормально дождется завершения http запроса (в разумных пределах конечно)
Не нужно использовать unstable_noCache(), как говорит Lee Rob (из Next.js team)? Вы не используете его с "Suspense" в next.js? Он говорит, что без этого не будет работать и показывает на примере, но у меня работает. Ощущение, что я чего-то не понимаю.
Круто, пожалуй единственное, что непонятно, так это как это все на seo скажется. Поисковые машины же наверное только первые рендер парсят. В итоге смысл от это стриминга, если подавляющее большинство людей юзают next вместо чистого реакта, только ради seo. Быстрая отдача всего html.
Поисковики ждут пока полностью закончится рендерится страница, и потом изучают контент. Естественно у них есть лимиты по времения ожидания. Так что эта модель очень хорошо работает с поисковиками :)
@@it-sin9k а лимиты по времени известны? Я имею ввиду какие-то официальные, а не замеры комьюнити
ну вообще время отклика для краулера, тоже есть метрика, которую измеряют) но точной цифры мне не известно)
Чётко, suspense юзал последний раз когда классовые компоненты пилил
В чём разница suspense и обычной loader компоненты ?
А для чего вы Suspense использовали с классовыми компонентами?
ни в чём. в документации написано что loader это только сахар
@@it-sin9k просто увидел в документации
5:50 Не могли бы вы, пожалуйста, чуть подробнее разобрать тему со структурой папок? Ранее пытался разобраться с этим, но все как-то громоздко в стандартном шаблонном проекте. И как-то забил в виду отсутствия прод проекта на нексте и непонятности, как, что и куда.
Например, есть компоненты с sql запросами, во что их класть, как это связано с другими файлами и что стоит, а что не стоит писать на layout и page. А главное, где тут сам роутинг? Тема с наименованием папок как роутов звучит крайне громоздко...
sql лучше отдать бэку. Фронт максимум должен делать агрегирующие методы.
Ты офигеешь поддерживать проект в которому будут и вёрстка и прямые запросы в базу. Тем более что это и оптимизировать потом не получится.
@@DemetriyArh много зависит от сложности проекта. Никто не мешает создать отдельную папку с логикой и функционалом "Бэка". Но не открывать весь это функционал через рест апи вызывая через http, а дергать напрямую напрямую из серверных компонентов как обычную асинхронную функцию. Профит очевиден -- нет лишних http запросов, которые даже в рамках одного сервера работает не моментально. Тут идея в том что в серверных компонентах можно вызывать асинхронные функции, а что эти функции делают (http запрос или запрос в sql) уже не так важно.
А как это будет работать для метрик и SEO? Ведь смысл использования SSR в большинстве в этом. Если мы будем добавлять повсеместно лоадеры для всех компонентов, то мы от выбора Next ничего не выиграем, только добавим оверхеда в разработке. Уж лучше тогда просто React брать. Было бы неплохо увидеть ролик с разбором этой темы
Краулеры ждут окончания http запроса на страницу. На видео показано 3:26 что во время стриминга http запрос не закрывается. Он закроется только после того как все асинхронные компоненты будут отрендерены на сервере и переданы на клиент. Таким образом роботы начнут анализировать полностью загруженную и готовую страницу.
@@ArtyomTalonchickпонял, спасибо. А что по поводу метрик? они вроде тоже влияют на показатель в выдаче
можно кэшировать ответ от сервера и будет мгновенная отдача) может еще запишу про это)
@@ArtyomTalonchick как это поможет в подмене контента под саспенсом в котором уже отображается лоадер?
@@ArtyomTalonchick хм, я может не прав, но разве краулеры не игнорируют запуск js кода? сработают ли тогда script теги? если нет, то контент который увидят роботы будет совсем не таким как мы ожидали
UPD: или может я устарел и они уже умеют запускать js?
Может я что то не правильно понимаю, но как такая дозагрузка контента влияет на поисковую оптимизацию? Не создаёт ли это те же проблемы что и рендеринг с обработкой запросов полностью на клиенте в контексте поисковой оптимизации?
Чтобы все было красиво, есть еще слой с cache ответа от сервера, т.е. можно кешировать по идее целый html файл и отдавать его боту когда он придет мгновенно. А если придет на холодную, тогда бот подождет пока полностью не скачается страница или по таймауту начнет читать страницу
@@it-sin9k тоесть можно с краулером как то взаимодействовать? Единственное что мне невольно попадалось на глаза, так это исключения с которыми он не должен работать, но о каком то сложном взаимодействии я даже не подозвревал. Всегда думал что он ни кого не спрашивает что ему делать, а головная боль что бы ему "угодить" на стороне разработчика лежит.
@@Virass а что под фразой взаимодействовать подразумевается? ну он ждет пока страница загрузится) а потом начинает изучать контент. А мы как разрабы можем из кэща ему сразу страницу отдать без ожидания запросов, вот и вся магия)
можно ли при создании стора сразу получить данные в initialstate в redux(или redux toolkit) +next?
хмм, кажется серверные компоненты не очень хорошо ложатся на эту задачу
@@it-sin9kспасибо за ответ. я так же думал. но не нашел конструкции которая это делает. остаются только промисы и все, поскольку полностью асинхронную функцию при создании стора сделатьне получается, несмотря на то что я ее уже обернул для этого внешней асинхронной функцией.я решил проблему другим путем, но хочется все же этим решить, как бы как изначально оно было.
В теории можно создать инстанс стора прямо в рендер функции серверного компонента заюзав сразу нужные данные и передавать этот стор провайдеру. Проблем с ререндером не будет, так как серверные компоненты рендерятся лишь один раз и только на сервере. Возможно нужно будет обернуть провайдер в отдельный клиентский компонент. Но проблема в том что такой подход создаст отдельный Стор на странице, что не всегда подходит. Ещё можно вызвать прям на этапе рендера экшен из редакса, но это опасно и реакт будет плеваться ошибками в консоли (но такой костыль работает))))
@@ArtyomTalonchick спасибо. но смысл как раз в том чтобы этот стейт потом использовать вместе с вновь подгруженным. как единый. напртмер сортировать или добавить в начало или конец вновь загруженное. я делал в серверном, но поскольку в с создании стора нельзя сделат асинк-авэйт, ему приходит промис, а не массив предметов.
Нравится Next.js подход, но то что фреймворк сильно завязан на Vercel - это не очень. + Его нельзя использовать с не-node бэком :( вернее, можно но тогда кроме бэка будет еще и нода крутиться как миддлвар. Ох уж эти ваши фронтенды сложные.
Почему нельзя? Фронт должен крутится с нодой, а уж куда он там запросы шлет, это вообще не важно. (fetch)
Все отлично работает без Vercel.
@@AmirLatypov с каких пор он должен крутиться с нодой? Он может собираться нодой, но необязательно крутится на ней)
@@boldureans тогда не будет middleware и серверных компонентов. Ну и SSR в целом.
@@boldureansДля серверного рендеринга нужен, ну знаешь... Сервер😂
А я тут обнаружил проблему с префетчем некстовых ссылок. Внутренних ссылок ведь очень много на каждой странице, и в итоге в начале сессии генерится куча запросов, которые по сути блокируют переходы по ссылкам да и вообще любые запросы, на несколько секунд.
Потом конечно всё летает, т.к. предзагружено.. но вот как управлять этим тотальным префетчем?
А если его отключать по дефлту, то магии мгновенных переходов между страницами не случается.
Может есть опыт оптимизации ссылок в нексте?
К сожалению, ответа на этот вопрос у меня нет. Нужно разбираться)
Доброго времени суток. У меня вопрос не по теме, но вдруг будет прочитан разбирающимся человеком и прокоментирован:
Почему до сих пор в языках программирования не используется символ равный по значению true или false? При минификации js часто вижу, что булевое значение заменяется на !0 / !1, в апи часто 0 и 1, но тогда надо делать проверку на наличие переменной, значения же в виде текста стоят в 4-5 раз дороже при хранении/передаче данных. В чём загвоздка такого решения?
Потому что читать true false в коде удобно 🤷♂️. Там где важна экономия этих нескольких байт, там отдельно и запариваются над вопросом.
Ну и чаще всего компилируется в 1 и 0 в любом случае.
@@AmirLatypov true и false не компилируются в 0/1, можете посмотреть любой минифицированный файл. Так же что мешает разрабатывать со стандартными true/false, а минифицировать в данные символы? В общем спасибо за старания, нро ваш ответ не несёт никакой полезнйо информации
@@AlefersXaoC кажется вы не понимаете разницу между минификацией и компиляцией. Не думаю что существуют компиляторы которые оставляют true и false в коде. Минификаторы вполне, но что мешает адаптировать/дополнить?
@@AmirLatypov Повторюсь, вы не поняли смысла вопроса, ваши ответы не приближают к пониманию его сути ни на символ
Я фигею, что так просто и бесплатно
лишь бы все прокачивались)
В предыдущем видео про streaming (ua-cam.com/video/u3zvNJ3PZGA/v-deo.html) говорится о том, что html передается частями и дописывается с конца. С этим в целом понятно. Но как это работает с компонентом в середине дома? Получается что "моментально" отдается верстка fallback из Suspence, но как потом этот fallback заменяется новой версткой с точки зрения стриминга? Стриминг ведь всё дописывать в конец, а тут кусок в середине
Уверен, что backspace посылается
@@badcoder1337 Интересно... Немало там backspace`ов будет) К тому же это должно отразиться на размере передаваемых данных, при чем если стримится много компонентов, то html не раз перезаписываться будет. Еще непонятно как с этим будет работать гидратация. Мы ведь видели что реакт начинает работать до получения всех асинхронных компонентов. Получается реакту нужно подписаться на стриминг, несколько раз пересобирать дерево и каждый раз проводить гидтратацию. Но это должно повлечь повторный вызов эфектов. Выглядит не очень оптимально...
в Suspence не надо оборачивать, это делается под капотом некста, достаточно сделать файл loading
Suspence нужен для ассинхронной загрузки компонента, например списка товаров получаемых из БД. Файл loading нужен для отображения полной загрузки страницы со всеми запросами и будет отображаться до тех пор, пока они все не исполнятся (а-ля Promise.allSettled)
@@rebelliondreamer6261 loading не обязательно для полной загрузки страницы, для различных частей тоже, например компанент с товарами, компанент с категориями
Для корневого layout нет файла loading. Суть suspense в том чтобы оборачивать отдельные компоненты (блоки на странице). В документации четко описано как и для чего это можно использовать.
@@rebelliondreamer6261 Есть ещё трюк с параллельными роутами. Можно сделать несколько "страниц" в одном лаяуте, и каждой свой лоадер добавить.
посматриваю ваши видео, правда вы не оч понятно для меня обьясняете
Очень жаль :(
А есть у вас опыт в такого рода технологиях? если опыт небольшой, может подборку более простых тем для вас собрать?
Видео точно заслужило лайк!
Видео точно заслужило лайк!