Как сделать Loader / Skeleton для серверных компонентов

Рет қаралды 9,415

Күн бұрын

Пікірлер: 88

@Сергей-э8о6м 11 ай бұрын

Спсибо , братик. Побольше про Nextjs пожалуйста, особенно про server components, server action и вот эти все магические фичи.

@it-sin9k 11 ай бұрын

Спасибо!) но честно скажу, статистика просмотра NextJS видео совсем удручяет) Проводил даже опрос в ТГ канале актуально ли еще делать видео про NextJS)

@VolodkaBobovich 11 ай бұрын

@@it-sin9k На каждый товар есть свой покупатель. Мне например интересно.

@dimd8824 11 ай бұрын

интересный контент, качественная подача контента + стерео звук в начале на заставке классный. Вы профи!

@it-sin9k 11 ай бұрын

Спасибо! Надеюсь найдете для себя еще много интересного контента!)

@ddflruc 11 ай бұрын

Топовый инженерный контент! Таких каналов мало.

@it-sin9k 11 ай бұрын

Спасибо!) Надеюсь найдете еще много всего интересного на канале)

@dima__rx5fw3rm1n 11 ай бұрын

Видео классное, побольше бы раскрыть тем про NextJS)

@it-sin9k 11 ай бұрын

Я вообще не против NextJS, но кажется большинству эта тема не очень интересна :(

@ArtyomTalonchick 11 ай бұрын

@@it-sin9k скорее всего это из-за того что тема немного сложнее реакта и большинство отвергает то, чего не понимает) Но такие видео как раз и нужны для того чтобы помочь разобраться и в технической части, и вообще ответить на вопрос почему Next так хорош и почему его нужно изучать

@kkkotiqqq 11 ай бұрын

@@it-sin9k наоборот, очень интересно)

@kkkotiqqq 10 ай бұрын

@@it-sin9kнаоборот очень интересна)

@vladimirbavtenko9080 10 ай бұрын

Не, точно нужно и интересно! Больше, больше Next’a!

@mzpizote 11 ай бұрын

Ооо вот теперь кайф, я понял зачем нужен стриминг! Спасибо ❤

@boldureans 11 ай бұрын

Спасибо за видео!

@whoooooo 11 ай бұрын

Спасибо, про loading.jsx не знал! Теперь знаю чуть больше :)

@barmaley9705 11 ай бұрын

контент в кайф вообще красавчик

@it-sin9k 11 ай бұрын

Спасибо! будем продолжать)

@rafalskyi 11 ай бұрын

гарний формат і виділений час на конкретний кейс

@johnstark3045 11 ай бұрын

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

@en_kratia 10 ай бұрын

Спасибо

@yivo89 11 ай бұрын

Видео точно заслужило лайк!

@Alexei_Ovsyannikov 11 ай бұрын

Видео понравилось. Было интересно увидеть во что превращаются серверный компоненты в браузере.

@Flamel001100 11 ай бұрын

Видео точно заслужило лайк, и даже не один)

@siberiacancode 11 ай бұрын

Топовый контент как всегда, респект за nextjs 🧊

@ДмитрийАрзяков-г3ф 10 ай бұрын

Очень крутой контент

@dima__rx5fw3rm1n 11 ай бұрын

5:50 Не могли бы вы, пожалуйста, чуть подробнее разобрать тему со структурой папок? Ранее пытался разобраться с этим, но все как-то громоздко в стандартном шаблонном проекте. И как-то забил в виду отсутствия прод проекта на нексте и непонятности, как, что и куда. Например, есть компоненты с sql запросами, во что их класть, как это связано с другими файлами и что стоит, а что не стоит писать на layout и page. А главное, где тут сам роутинг? Тема с наименованием папок как роутов звучит крайне громоздко...

@DemetriyArh 11 ай бұрын

sql лучше отдать бэку. Фронт максимум должен делать агрегирующие методы. Ты офигеешь поддерживать проект в которому будут и вёрстка и прямые запросы в базу. Тем более что это и оптимизировать потом не получится.

@ArtyomTalonchick 11 ай бұрын

@@DemetriyArh много зависит от сложности проекта. Никто не мешает создать отдельную папку с логикой и функционалом "Бэка". Но не открывать весь это функционал через рест апи вызывая через http, а дергать напрямую напрямую из серверных компонентов как обычную асинхронную функцию. Профит очевиден -- нет лишних http запросов, которые даже в рамках одного сервера работает не моментально. Тут идея в том что в серверных компонентах можно вызывать асинхронные функции, а что эти функции делают (http запрос или запрос в sql) уже не так важно.

@en_kratia 10 ай бұрын

Не нужно использовать unstable_noCache(), как говорит Lee Rob (из Next.js team)? Вы не используете его с "Suspense" в next.js? Он говорит, что без этого не будет работать и показывает на примере, но у меня работает. Ощущение, что я чего-то не понимаю.

@arman-6172 11 ай бұрын

Отличный ролик! Спасибо!) Любопытно: 1. По сео уже поднимали тему и вроде люди пишут что дождутся боты поисковиков, но будут ли они отмечать что сайт долго отвечает и индексировать реже? pagespeed, lighthouse упадут показатели? первый ответ быстрый, но то что нужно юзеру пришло через 3-5 секунд? 2. Это браузер напрямую с нодой общался без проблем тайминга и тд. Как ведет себя в бою когда между ними nginx? WAF? 3. При переходе между страницами как это все работает? Пропсы и компоненты как-то синкаются? В старых версиях на любой запрос пропсы страницы тянулись полностью, а тут? 4. Redux, Mobx и т.д. с такими подходами все еще нужен? Или будут уходить от этого всего?

@it-sin9k 11 ай бұрын

Спасибо за большой комментарий!) 1. да, показатели конечно же упадут) но чтобы улучшить эти метрики, нужно использовать еще кэширование серверных компонентов) про это думаю еще отдельное видео сделать) 2. В конечном итоге, все равно все клиенты общаются с нодой напрямую, поэтому думаю результаты будут те же. Если конечно не будет специальных настроек о разрыве соединений 3. Если даже полазить по страницам разным на официальном сайте. В некоторых страницах есть перезагрузка страницы, а в некоторых нет. Значит существуют как минимум несколько стратегий :) 4. Кажется тот же Redux уже не очень хорошо работает с этим всем. Но есть отзывы про другие стейт менеджеры, которые лучше справляются. Поэтому думаю они останутся, но возможно перейдем на другие инструменты)

@arman-6172 11 ай бұрын

@@it-sin9k благодарю за полный ответ!) Ждем новые видео!)

@HEX_CAT 11 ай бұрын

Работаю на Вью, но все равно было интересно, спасибо❤

@kiritushka 11 ай бұрын

интересно как это скажется на сео

@couragic 11 ай бұрын

Скорее всего индексирующий бот нормально дождется завершения http запроса (в разумных пределах конечно)

@AlefersXaoC 11 ай бұрын

Доброго времени суток. У меня вопрос не по теме, но вдруг будет прочитан разбирающимся человеком и прокоментирован: Почему до сих пор в языках программирования не используется символ равный по значению true или false? При минификации js часто вижу, что булевое значение заменяется на !0 / !1, в апи часто 0 и 1, но тогда надо делать проверку на наличие переменной, значения же в виде текста стоят в 4-5 раз дороже при хранении/передаче данных. В чём загвоздка такого решения?

@AmirLatypov 11 ай бұрын

Потому что читать true false в коде удобно 🤷‍♂️. Там где важна экономия этих нескольких байт, там отдельно и запариваются над вопросом. Ну и чаще всего компилируется в 1 и 0 в любом случае.

@AlefersXaoC 11 ай бұрын

@@AmirLatypov true и false не компилируются в 0/1, можете посмотреть любой минифицированный файл. Так же что мешает разрабатывать со стандартными true/false, а минифицировать в данные символы? В общем спасибо за старания, нро ваш ответ не несёт никакой полезнйо информации

@AmirLatypov 11 ай бұрын

@@AlefersXaoC кажется вы не понимаете разницу между минификацией и компиляцией. Не думаю что существуют компиляторы которые оставляют true и false в коде. Минификаторы вполне, но что мешает адаптировать/дополнить?

@AlefersXaoC 11 ай бұрын

@@AmirLatypov Повторюсь, вы не поняли смысла вопроса, ваши ответы не приближают к пониманию его сути ни на символ

@Mr.Bellamy 11 ай бұрын

Круто, пожалуй единственное, что непонятно, так это как это все на seo скажется. Поисковые машины же наверное только первые рендер парсят. В итоге смысл от это стриминга, если подавляющее большинство людей юзают next вместо чистого реакта, только ради seo. Быстрая отдача всего html.

@it-sin9k 11 ай бұрын

Поисковики ждут пока полностью закончится рендерится страница, и потом изучают контент. Естественно у них есть лимиты по времения ожидания. Так что эта модель очень хорошо работает с поисковиками :)

@Mr.Bellamy 11 ай бұрын

@@it-sin9k а лимиты по времени известны? Я имею ввиду какие-то официальные, а не замеры комьюнити

@it-sin9k 11 ай бұрын

ну вообще время отклика для краулера, тоже есть метрика, которую измеряют) но точной цифры мне не известно)

@Virass 10 ай бұрын

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

@it-sin9k 10 ай бұрын

Чтобы все было красиво, есть еще слой с cache ответа от сервера, т.е. можно кешировать по идее целый html файл и отдавать его боту когда он придет мгновенно. А если придет на холодную, тогда бот подождет пока полностью не скачается страница или по таймауту начнет читать страницу

@Virass 10 ай бұрын

@@it-sin9k тоесть можно с краулером как то взаимодействовать? Единственное что мне невольно попадалось на глаза, так это исключения с которыми он не должен работать, но о каком то сложном взаимодействии я даже не подозвревал. Всегда думал что он ни кого не спрашивает что ему делать, а головная боль что бы ему "угодить" на стороне разработчика лежит.

@it-sin9k 10 ай бұрын

@@Virass а что под фразой взаимодействовать подразумевается? ну он ждет пока страница загрузится) а потом начинает изучать контент. А мы как разрабы можем из кэща ему сразу страницу отдать без ожидания запросов, вот и вся магия)

@romanmed9035 11 ай бұрын

можно ли при создании стора сразу получить данные в initialstate в redux(или redux toolkit) +next?

@it-sin9k 11 ай бұрын

хмм, кажется серверные компоненты не очень хорошо ложатся на эту задачу

@romanmed9035 11 ай бұрын

@@it-sin9kспасибо за ответ. я так же думал. но не нашел конструкции которая это делает. остаются только промисы и все, поскольку полностью асинхронную функцию при создании стора сделатьне получается, несмотря на то что я ее уже обернул для этого внешней асинхронной функцией.я решил проблему другим путем, но хочется все же этим решить, как бы как изначально оно было.

@ArtyomTalonchick 11 ай бұрын

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

@romanmed9035 11 ай бұрын

@@ArtyomTalonchick спасибо. но смысл как раз в том чтобы этот стейт потом использовать вместе с вновь подгруженным. как единый. напртмер сортировать или добавить в начало или конец вновь загруженное. я делал в серверном, но поскольку в с создании стора нельзя сделат асинк-авэйт, ему приходит промис, а не массив предметов.

@Sengulair 11 ай бұрын

А как это будет работать для метрик и SEO? Ведь смысл использования SSR в большинстве в этом. Если мы будем добавлять повсеместно лоадеры для всех компонентов, то мы от выбора Next ничего не выиграем, только добавим оверхеда в разработке. Уж лучше тогда просто React брать. Было бы неплохо увидеть ролик с разбором этой темы

@ArtyomTalonchick 11 ай бұрын

Краулеры ждут окончания http запроса на страницу. На видео показано 3:26 что во время стриминга http запрос не закрывается. Он закроется только после того как все асинхронные компоненты будут отрендерены на сервере и переданы на клиент. Таким образом роботы начнут анализировать полностью загруженную и готовую страницу.

@Sengulair 11 ай бұрын

@@ArtyomTalonchickпонял, спасибо. А что по поводу метрик? они вроде тоже влияют на показатель в выдаче

@it-sin9k 11 ай бұрын

можно кэшировать ответ от сервера и будет мгновенная отдача) может еще запишу про это)

@TheJeronimotion 11 ай бұрын

@@ArtyomTalonchick как это поможет в подмене контента под саспенсом в котором уже отображается лоадер?

@BogdanPolonsky 11 ай бұрын

@@ArtyomTalonchick хм, я может не прав, но разве краулеры не игнорируют запуск js кода? сработают ли тогда script теги? если нет, то контент который увидят роботы будет совсем не таким как мы ожидали UPD: или может я устарел и они уже умеют запускать js?

@DemetriyArh 11 ай бұрын

А я тут обнаружил проблему с префетчем некстовых ссылок. Внутренних ссылок ведь очень много на каждой странице, и в итоге в начале сессии генерится куча запросов, которые по сути блокируют переходы по ссылкам да и вообще любые запросы, на несколько секунд. Потом конечно всё летает, т.к. предзагружено.. но вот как управлять этим тотальным префетчем? А если его отключать по дефлту, то магии мгновенных переходов между страницами не случается. Может есть опыт оптимизации ссылок в нексте?

@it-sin9k 11 ай бұрын

К сожалению, ответа на этот вопрос у меня нет. Нужно разбираться)

@konstantins.6598 11 ай бұрын

очередной "гениальный" костыль от Versel...

@aximas778 11 ай бұрын

Чётко, suspense юзал последний раз когда классовые компоненты пилил В чём разница suspense и обычной loader компоненты ?

@it-sin9k 11 ай бұрын

А для чего вы Suspense использовали с классовыми компонентами?

@DemetriyArh 11 ай бұрын

ни в чём. в документации написано что loader это только сахар

@aximas778 11 ай бұрын

@@it-sin9k просто увидел в документации

@boldureans 11 ай бұрын

Нравится Next.js подход, но то что фреймворк сильно завязан на Vercel - это не очень. + Его нельзя использовать с не-node бэком :( вернее, можно но тогда кроме бэка будет еще и нода крутиться как миддлвар. Ох уж эти ваши фронтенды сложные.

@AmirLatypov 11 ай бұрын

Почему нельзя? Фронт должен крутится с нодой, а уж куда он там запросы шлет, это вообще не важно. (fetch) Все отлично работает без Vercel.

@boldureans 11 ай бұрын

@@AmirLatypov с каких пор он должен крутиться с нодой? Он может собираться нодой, но необязательно крутится на ней)

@AmirLatypov 11 ай бұрын

@@boldureans тогда не будет middleware и серверных компонентов. Ну и SSR в целом.

@pika4u380 8 ай бұрын

@@boldureansДля серверного рендеринга нужен, ну знаешь... Сервер😂

@ArtyomTalonchick 11 ай бұрын

В предыдущем видео про streaming (kzbin.info/www/bejne/q2Tdp4GAaLWNfaM) говорится о том, что html передается частями и дописывается с конца. С этим в целом понятно. Но как это работает с компонентом в середине дома? Получается что "моментально" отдается верстка fallback из Suspence, но как потом этот fallback заменяется новой версткой с точки зрения стриминга? Стриминг ведь всё дописывать в конец, а тут кусок в середине

@badcoder1337 11 ай бұрын

Уверен, что backspace посылается

@ArtyomTalonchick 11 ай бұрын

@@badcoder1337 Интересно... Немало там backspace`ов будет) К тому же это должно отразиться на размере передаваемых данных, при чем если стримится много компонентов, то html не раз перезаписываться будет. Еще непонятно как с этим будет работать гидратация. Мы ведь видели что реакт начинает работать до получения всех асинхронных компонентов. Получается реакту нужно подписаться на стриминг, несколько раз пересобирать дерево и каждый раз проводить гидтратацию. Но это должно повлечь повторный вызов эфектов. Выглядит не очень оптимально...

@radomir_web 11 ай бұрын

в Suspence не надо оборачивать, это делается под капотом некста, достаточно сделать файл loading

@rebelliondreamer6261 11 ай бұрын

Suspence нужен для ассинхронной загрузки компонента, например списка товаров получаемых из БД. Файл loading нужен для отображения полной загрузки страницы со всеми запросами и будет отображаться до тех пор, пока они все не исполнятся (а-ля Promise.allSettled)

@radomir_web 11 ай бұрын

@@rebelliondreamer6261 loading не обязательно для полной загрузки страницы, для различных частей тоже, например компанент с товарами, компанент с категориями

@ArtyomTalonchick 11 ай бұрын

Для корневого layout нет файла loading. Суть suspense в том чтобы оборачивать отдельные компоненты (блоки на странице). В документации четко описано как и для чего это можно использовать.

@DemetriyArh 11 ай бұрын

@@rebelliondreamer6261 Есть ещё трюк с параллельными роутами. Можно сделать несколько "страниц" в одном лаяуте, и каждой свой лоадер добавить.