Скачать "Next.js с нуля"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Глаголы движения в ситуациях (А2) - Russian verbs of motions (A2)Следующее видео: Пять дней и утро шестого Леонид Словин Аудиокнига

0:00

Начало

3:42

О себе

4:29

Что такое Next.js?

7:45

Собранное React приложение

8:35

Загрузка и инициализация SPA

10:31

Собранное Next приложение

12:24

Загрузка и инициализация SPR/SSG

15:40

Проверка в браузере

21:33

Dev окружение

36:54

Практика

Пять дней и утро шестого Леонид Словин Аудиокнига

Пять дней и утро шестого Леонид Словин Аудиокнига

Канал: BookWorm

Глаголы движения в ситуациях (А2) - Russian verbs of motions (A2)

Глаголы движения в ситуациях (А2) - Russian verbs of motions (A2)

Канал: Super Russian

2024 Henry Clay High School Underclassmen Awards 2024-05-02 16:23

2024 Henry Clay High School Underclassmen Awards 2024-05-02 16:23

Канал: Jason Behler

Строение тела человека

Строение тела человека

Канал: Вместо репетитора Елена Викторовна

physics senior 2 second term final revision | revision physics 2nd secondary second term| Mr.Shady

physics senior 2 second term final revision | revision physics 2nd secondary second term| Mr.Shady

Канал: ELkheta seniors - الخطة ثانوى

Just Dance - JUST DANCE BY LADY GAGA MASH-UP + ORIGINAL

Just Dance - JUST DANCE BY LADY GAGA MASH-UP + ORIGINAL

Канал: jeyann

Мужчина: Честная инструкция_01022022

Мужчина: Честная инструкция_01022022

Канал: Ярослав Самойлов

Eiyuden Chronicle: Hundred Heroes - Winning the Bridge Duel

Eiyuden Chronicle: Hundred Heroes - Winning the Bridge Duel

Канал: KOLsaito

День 109. Библия за год. С митрополитом Иларионом. Библейский ультрамарафон портала «Иисус»

День 109. Библия за год. С митрополитом Иларионом. Библейский ультрамарафон портала «Иисус»

Канал: Портал «Иисус»

Почему современные коучи не могут спасти брак?

Почему современные коучи не могут спасти брак?

Канал: Алекс Мэй / ALEX MAY OFFICIAL

next.js

нуля

00:00:16

нам говорят что я вишере всем привет

00:00:22

если вы здесь пишите в чат

00:00:27

посмотрим сколько здесь активных людей я

00:00:32

пока начну

00:00:34

мы сегодня поговорим про на xds и это

00:00:39

будет такой так скажем вводная лекция

00:00:43

панель с мы вообще рассмотрим зачем gps

00:00:47

нужен для чего его можно использовать

00:00:52

какие у него плюсы какие минусы не будем

00:00:58

говорить сегодня мы сравним

00:01:01

в целом подход написание приложения и в

00:01:06

целом фронтэнда как с по сравнение с

00:01:09

ссср или ssd то есть как server server

00:01:16

сайт рендеринг так и статическая

00:01:19

генерация сайта потом мы рассмотрим

00:01:23

сборку посмотрим как собирается react

00:01:26

приложение что из этого получается

00:01:27

посмотрим как собирается на x приложение

00:01:31

посмотрим на то как выглядит окружении

00:01:34

так скажем разработчика

00:01:35

в том плане какие инструменты нам

00:01:39

предоставлены вместе с реактор в этом

00:01:42

случае мы все таки будем смотреть на cry

00:01:44

3 акт об потому что это такой хороший

00:01:46

стартер для разворачивания

00:01:49

react приложения говорят звук тихий

00:01:53

я щас попробую подкрутить если тихий и

00:01:57

кому-то еще тихо

00:02:05

так я пока продолжу если что пишите я

00:02:09

тут кое-что подкрутил должно быть громче

00:02:11

на много тогда посмотрим какие

00:02:17

возможности сама среда изначально

00:02:19

предоставляет в реакции будем смотреть

00:02:21

нагретый акт об в иных джесси все есть

00:02:24

из коробки далее посмотрим основные api

00:02:29

для получения данных

00:02:33

значит кому-то надо просто подкрутить

00:02:35

звук у себя на компьютере если всем

00:02:38

остальным норм показалось нак спутник

00:02:46

страсть здесь никс будем про react

00:02:49

говорить не про view сегодня сегодня

00:02:52

скорее про react

00:02:54

окей и да как и сказал последнюю очередь

00:02:58

рассмотрим api и получение данных

00:03:01

они же на самом деле серверные функции

00:03:04

то что обычно это что-то новое для

00:03:09

фронтенд разработчика потому что это

00:03:11

часть больше связано с ес на самом деле

00:03:17

кажется что это просто 5 и

00:03:20

ник джейсон но в целом внутри мы там

00:03:23

видим абсолютно

00:03:25

простое но джесс а пик которая просто

00:03:30

прилетает к нам в эти серверные функции

00:03:32

мы можем с ними работать так я

00:03:35

достаточно много уже сказал про то что

00:03:37

моде чем мы будем говорить и добавлю

00:03:40

наверное немножко про себя

00:03:42

меня зовут павел минеев вы наверное

00:03:45

видели видео со мной на канале если не

00:03:48

видели

00:03:50

посмотреть я занимаюсь менторства мэс

00:03:54

недавно времени

00:03:56

являюсь преподавателем в of school пишу

00:04:00

код уже в районе наверно 10 лет работал

00:04:03

в разных крупных компаниях

00:04:05

люблю консорт поэтому активно кантри бью

00:04:10

чем в систему комментариев remarks f2

00:04:13

можете тоже посмотреть если вам

00:04:15

интересно

00:04:17

если у вас есть какие-то идеи можете

00:04:19

даже помочь вот а теперь наверное

00:04:22

перейдем к главному

00:04:25

и попробуем разобраться все же что такое

00:04:30

gps и зачем вообще ребята сели и решили

00:04:34

что давайте-ка мы запилим такую штуку

00:04:39

чего им не хватало собственно говоря

00:04:44

того что хотела сделать такое приложение

00:04:48

которое будет присылать сервера не

00:04:52

просто пустую страницу а полностью

00:04:53

готовый темы как старые добрые времена

00:04:55

то есть сделать тот самый серверный

00:04:58

рендеринг чтобы можно было react

00:05:00

рендерить в обычный html и посылать его

00:05:05

клиенту для того чтобы не придумывать

00:05:11

никаких дополнительных шаблонизатор of

00:05:14

сразу же взяли react и по сути наш джесс

00:05:19

дает нам очень удобный

00:05:21

api для построения тех самых изоморфных

00:05:24

изоморфных приложений то есть когда мы

00:05:27

собираем наш код на java скрипте мы

00:05:29

можем его выплыть выполнить полноценно

00:05:32

на сервере и получить html и абсолютно

00:05:35

также вы выполнить на клиенте и

00:05:37

отрендерится такой же html вот если

00:05:43

говорить о том что под под капотом еще

00:05:46

next используют он собирает наш проект с

00:05:51

помощью того же самого пока потому что

00:05:54

поэтому при настройке проекта если

00:05:56

что-то нужно будет чуть-чуть докрутить

00:05:58

подделать это не должно вызвать проблем

00:06:02

у людей которые уже с ним знакомы а в

00:06:04

паку нас такой стандарт уже для сборки

00:06:08

проектов сейчас появляются новые

00:06:09

сборщики но от вы пока

00:06:13

никто не уходит в целом вот чтоб чтобы

00:06:18

еще я хотел во введении сказать я думаю

00:06:22

все про них джесс давайте посмотрим уже

00:06:26

по глубже в него и сравним его с

00:06:31

реактором и тут мы уже будем прям видеть

00:06:34

вот эти самые отличия где что и как

00:06:38

происходит и начнем мы наверно из

00:06:43

реактора да это как раз тот слайд

00:06:48

который должен было настоять когда я

00:06:51

говорил про сравнение

00:06:53

но давайте я еще наверно добавлю о

00:06:57

сравнении то что на их же это все-таки

00:07:00

фреймворк он обеспечивает нам среду и

00:07:04

какие-то своей pr этапе реакции с это у

00:07:08

нас просто библиотека с помощью которой

00:07:10

мы можем создавать какие-то ей

00:07:14

интерфейсе dex ds внутри себя используют

00:07:19

тот же самый акт поэтому для нас как для

00:07:22

разработчиков react приложений

00:07:24

практически ничего отличаться не будет

00:07:26

мы будем писать тот же самый gsx мы

00:07:28

можем использовать класс компоненты

00:07:31

основные на классах на функции с руками

00:07:34

вообще без разницы и давайте поговорим о

00:07:43

том как выглядит все таки собранный олег

00:07:46

приложение по сути когда мы собираем

00:07:48

react приложения на выходе у нас

00:07:51

получается пустая абсолютно не абсолютно

00:07:55

но пустая темой страница в которой есть

00:07:58

какой-то ход с теми метаданными которые

00:08:01

мы в него изначально заложили они

00:08:04

практически статичные может быть мы

00:08:06

что-то меняем в момент сборки через в

00:08:09

пак вот но в основном что мы делаем мы

00:08:12

добавляем стиле и добавляем джесс на

00:08:16

в этот почтенный файл и получается что

00:08:20

страница прилетает пустая весь код у нас

00:08:24

содержится в каком-то файлики джесс все

00:08:27

стили в css и ну и статика лежит

00:08:31

отдельно как же браузер работает тогда

00:08:36

со страницей

00:08:37

которая построена как успей и использует

00:08:41

внутри себя react сначала он загружает

00:08:44

html в конце html и как раз у нас не в

00:08:50

конце в начале у нас будет про ключом

00:08:52

css потом мы подключим джесс чуть ниже

00:08:59

практически в конце этого hdmi или но

00:09:01

так как он настолько маленький что мы

00:09:04

даже не заметим вот этой разнице между

00:09:06

тем когда начал началась загрузка css и

00:09:10

точнее закончилась загрузка css и мы

00:09:12

начали загружать же с вот и пока у нас

00:09:16

джез не загрузится по сути ничего на

00:09:18

странице не отобразится только после

00:09:22

того как загрузился наш джесс он может

00:09:26

инициализироваться и загрузить еще какой

00:09:29

то это уже будет происходить асинхронно

00:09:31

и когда готовы стиле когда за готовые

00:09:37

скрипты

00:09:38

произойдет рендеринг то есть пока все

00:09:41

наши ресурсы не скачались мы не получим

00:09:46

ничего на странице но зато мы получим

00:09:49

это просто практически мгновенно потому

00:09:51

что react инициализируется и сразу же

00:09:55

нам на вен дарит полную страницу но

00:09:58

конечно если вы загружаете какие тачанки

00:10:01

отдельно какие-то кусочки интерфейса

00:10:03

загружаете асинхронно то они уже будут

00:10:07

даррен двигаться в момент загрузки

00:10:10

тех самых джинсов да я неправильно про

00:10:16

именовал наш у нас есть менеджеры

00:10:19

какой-то там чан ок джес который снизу

00:10:22

подгружается что же происходит когда мы

00:10:26

собираем на x приложения

00:10:28

наикс приложение собирается более

00:10:30

атомарная и самое главное отличие то что

00:10:35

я упомянул в начале что html

00:10:39

отрендерится сразу например если мы

00:10:42

собираем статические сгенерированную

00:10:46

страницу the next во время сборки

00:10:50

закинет в нее данные от рендере ты и

00:10:53

html и положит готовые чтим и для этой

00:10:55

страницы на диск также он может добавить

00:10:59

к нашему чтили html какой-то джейсон то

00:11:02

есть те самые данные которые нужны для

00:11:04

рендеринга конкретной страницы

00:11:07

зачем это нужно будет я щас чуть позже

00:11:09

объясню также будут будет чанг с общими

00:11:14

скрипт скриптами с общими стилями и с

00:11:18

скриптами которые нужны для конкретной

00:11:21

страницы то есть вот написали мы

00:11:23

формочку какое-то да на лаги не значит

00:11:28

вот этот код для формочки он будет на

00:11:30

странице логин же с на главной странице

00:11:36

не знаю мы там просто сделали какой-то

00:11:39

лендинг и вот все что относится к этому

00:11:41

будет находиться в яндекс без так же и

00:11:45

со стилями они будут разделены

00:11:46

постранично

00:11:47

ну и то же самое у нас еще какие то там

00:11:50

статические файлы будут лежать типов

00:11:53

вагонов и тому подобного или картинки

00:11:55

которые мы подгружаем на наших страницах

00:12:02

я вижу уже есть вопросы в чате я чуть

00:12:07

попозже на них обязательно отвечу

00:12:13

далее это все посмотрим как это все

00:12:18

загружается да мы получаем яндексе

00:12:23

чтимой в самом входе у нас стоит ссылка

00:12:28

на css поэтому загружаются css после

00:12:34

этого

00:12:35

подключается java script но он

00:12:37

загружается асинхронно

00:12:40

этот скрипт также как и в первом случае

00:12:43

может подключать какие-то другие чанки

00:12:45

сквиджер скрипта

00:12:46

но смысл в том что рендеринг у нас

00:12:49

начнется как раз в момент после того как

00:12:53

мы закончили

00:12:54

загружать css и начали получать эти dml

00:12:58

то есть у нас джесс загружается

00:13:02

параллельно с нашим мечте млм и

00:13:05

рендеринг начинается практически сразу

00:13:07

как только мы получили первые

00:13:11

html теги в нашем дереве так как браузер

00:13:15

готов уже это все рендерить и дальше

00:13:21

просто когда наши скрипты дает до

00:13:24

грузится получится простая картина у нас

00:13:27

уже есть готовые html страница на ней

00:13:30

все на рендере на интеле зиру и цари акт

00:13:33

он возьмет на нашей странице в самом

00:13:37

низу данные которые next при отточил

00:13:41

потому что

00:13:42

next в каждую страницу кроме всей html

00:13:45

внизу добавляет джейсон это те данные

00:13:49

которые используются на этой странице и

00:13:53

происходит так называем называемая

00:13:56

гидрации тем самым эти данные попадают в

00:14:02

ряд и

00:14:03

инициализируется ряд поверх нашего html

00:14:05

в итоге html становятся интерактивным и

00:14:09

начинает работать react когда мы кликаем

00:14:11

на какие-то элементы

00:14:13

интерактивные которые были описано в

00:14:15

нашем коде они работают так как мы и

00:14:18

ожидали поэтому чем же это хорошо то что

00:14:24

скорость и ощущения от того как

00:14:28

загружается страница в никс джез будет

00:14:32

во первых быстрее скорость будет быстрее

00:14:35

ощущение от того как быстро загружается

00:14:37

страница улучшится потому что

00:14:40

пользователь

00:14:42

будет видеть интерфейс практически сразу

00:14:44

как он загружается вот а если вы хорошо

00:14:48

пишете html то в том числе какие-то

00:14:52

элементы останутся также

00:14:54

интерактивными вот например в дпс есть

00:14:58

их собственные ссылки для того чтобы

00:15:02

переходить между страницами и они

00:15:05

специально через себя опрокидывают

00:15:08

ссылку на обычные

00:15:10

теги а и соответственно кликая по ним

00:15:14

люди даже до того как получили снимать

00:15:17

будут переходить по страницам так как

00:15:19

другие страницу нас тоже либо на рендере

00:15:22

ны либо будут ответ день деленное в

00:15:25

процессе перехода к ним если мы говорим

00:15:27

про ссср

00:15:33

ok пойдем дальше давайте проверим все

00:15:38

что я рассказал в браузере как это

00:15:40

работает

00:15:42

окей вот наш браузер до появился я

00:15:52

сейчас запущу наше приложение потому что

00:15:56

я их не запустил заранее

00:15:58

сиди реакция скорее всего там другая

00:16:07

команда и давайте посмотрим

00:16:21

да вот она запустилась на шаре акт

00:16:24

приложения то самое привычное созданное

00:16:28

cry 3 акта пам я открываю в новой

00:16:31

вкладке страницу с содержимым и что я

00:16:36

вижу тот самый

00:16:39

более-менее голый html в котором

00:16:43

присутствует мета-теги на

00:16:47

так как я сейчас запустил д сборку то мы

00:16:50

не видим здесь никакого css тут только

00:16:54

джаз или я ошибаюсь

00:16:56

давайте поищем да тут нет css потому что

00:16:59

это d сборка давайте сделаем для красоты

00:17:05

продакшен сборку посмотрим что уходит

00:17:10

пользователю когда мы раскладываем наше

00:17:13

приложение но в целом именно то о чем я

00:17:22

говорил снимали остается пустым

00:17:26

это основной принцип как бы испей потому

00:17:30

что мы должны все рендерить на клиенте

00:17:33

но вот сервер сайт рендерингом можно

00:17:37

продолжать использовать все плюсы испей

00:17:40

но при этом отдавать готовые чтимой уже

00:17:44

сервера запускаем сервер так он пока что

00:17:53

ставится я переключусь

00:17:55

и зайду в наше приложение next а вы

00:18:01

конечно этого пока не видите потому что

00:18:03

я вам показывают только браузер

00:18:12

[музыка]

00:18:17

как всегда когда ты что-то делал да она

00:18:22

работала

00:18:23

сейчас почему туда всякий сервер на

00:18:26

запустился там пока не джесс

00:18:35

останавливает зависимости и а кто так

00:18:44

странно что у нас не загрузились скрипты

00:18:47

да он как-то не собрался что странной

00:18:55

are built with оптимизировал ничего

00:19:13

сейчас еще раз запустим так да сейчас

00:19:26

она все установится еще раз странно что

00:19:30

перед тем как с вами общаться запускал

00:19:33

проверял и

00:19:36

да окей давайте вот таким образом да вот

00:19:44

оно открылось отлично это у нас будет

00:19:46

production сборка сейчас мы добавим

00:19:49

здесь проверим да у нас присутствует как

00:19:54

раз css появился и мы открываем

00:20:00

собранный чтения или вот он уже почищен

00:20:03

от комментариев

00:20:04

он сделан в одну строку тут делаю zion

00:20:10

ломился у нас скрипт потом мы получили

00:20:14

чанг и еще один чонг изначально я

00:20:19

говорил что это будет просто manages но

00:20:22

это было так скажем пример

00:20:25

описание того что происходит на самом

00:20:26

деле main у нас есть вот но так как

00:20:32

карьере акт об внутри себя уже имеет

00:20:37

настройку в пока для того чтобы

00:20:40

стараться оптимизировать наше приложение

00:20:42

разбивать на чанки он их чуть чуть под

00:20:45

разбил и даже что-то за им лайнелл и

00:20:48

также вот у нас есть css он подключается

00:20:52

в ходе как это принято обычно делать так

00:20:57

пойдемте посмотрим случилось ли что-то

00:21:00

снег джейсон так она их джесс у нас не

00:21:06

поставился я думаю мы в любом случае

00:21:11

увидим как работает и как выглядит

00:21:16

html-документ внутри яндекс то чуть

00:21:18

позже во время практики поэтому я

00:21:21

пожалуй перейду дальше пока в фоне у нас

00:21:24

тут все до ставится

00:21:34

да и мы как раз пойдем коду к тому что

00:21:39

этот химичил

00:21:41

пока вы не видели так здесь пусть

00:21:44

ставится дополнения

00:21:46

да у меня в моем проекте есть

00:21:49

next приложение react приложения для

00:21:53

того чтобы развернуть ягд приложение нам

00:21:57

требуется такая незатейливая команда

00:21:59

create a crate react об для того чтобы

00:22:04

развернуть на джесс приложения нам нужно

00:22:06

клеить mixtape отличие только в названии

00:22:13

что мы получим после того как мы

00:22:15

запустим первую вторую команду ну пойдем

00:22:18

сначала в react посмотрим чтобы потом

00:22:21

это все по сравнивать с next джейсон

00:22:26

окей у нас есть папочка сердце какие

00:22:30

какой-то пока джейсон пойдемте в пока

00:22:33

джейсон это обычно нас такая отправная

00:22:35

точка для того чтобы посмотреть что же в

00:22:40

проекте есть кей у нас проекте есть

00:22:43

что-то для тестирование конкретно

00:22:45

testing лайбрери сразу же из коробки

00:22:49

установлен а у нас есть сам react react

00:22:52

скрипты которые отвечают за сборку

00:22:55

проекта забив окружении вот тут мы их

00:22:58

запускаем да у нас есть вот vittles

00:23:02

сразу же теперь идут установленные и то

00:23:06

есть получается что вот тут у нас из

00:23:10

коробки настроенные репорты о

00:23:15

производительности о скорости загрузки и

00:23:17

у скорости рендеринга

00:23:20

там подробнее если вы права не слышали

00:23:24

про эти метрики можете почитать на сайте

00:23:28

в pdf по моему он называется это тот

00:23:31

сайт которым пользуюсь на который постит

00:23:33

статьи сам google

00:23:36

окей вернемся что еще есть мы видим что

00:23:41

у нас из коробки настроен и slynt с

00:23:45

пресетом cry 3 акта по

00:23:47

и

00:23:48

пресетом для jest а то есть поверх да

00:23:53

наши testing ловили будет работать еще

00:23:57

just для тестирования потом все это дело

00:23:59

собирается под конкретные браузер и если

00:24:03

мы красивы настраиваем наш браузер лист

00:24:06

и

00:24:09

что еще вроде все давайте посмотрим по

00:24:13

файликом да еще есть момент так здесь у

00:24:19

нас глобальные cs и загружается а как

00:24:21

раз вот в этом месте а тут тоже

00:24:23

глобальный ok но насколько я знаю мы

00:24:26

можем переименовать его давайте

00:24:32

попробуем переключимся в

00:24:36

сюда делаем

00:24:40

ярдов или может нам кто-то подскажет

00:24:44

если я не ошибаюсь привыкли надо вписать

00:24:49

тут тем старта

00:24:51

если я не ошибаюсь то cry 3 акт об из

00:24:54

коробки должен поддерживать css модули

00:25:07

так но давайте это чуть попозже тоже на

00:25:13

практике проверим потому что вы не

00:25:15

видите что происходит в моем браузере

00:25:17

маккейна вот в целом такой такой набор

00:25:24

инструментов здесь есть из коробки он

00:25:29

достаточно хороший то есть что-то для

00:25:32

тестирования для лендинга сразу

00:25:34

настроена можем определить браузеры в

00:25:37

которых мы хотим видеть наше приложение

00:25:39

работающим что же есть в нас джейси тут

00:25:45

все не настолько хорошо судить просто

00:25:53

есть gps есть react ну и рак дом это все

00:26:00

запускается также тремя легкими

00:26:04

командами df вместо старт которые у нас

00:26:10

в кей 3 акт об то есть когда мы

00:26:13

разрабатываем мы пишем df потом когда мы

00:26:16

хотим собрать наше приложение мы пишем

00:26:19

никс build или мы можем еще написать

00:26:25

экспорт и the next экспорт по умолчанию

00:26:30

почему-то эта команда не добавлены

00:26:32

настройки next экспорт делает такую

00:26:37

штуку что если мы никак не используем

00:26:39

сервер сайт рендеринг или

00:26:41

инкрементальный сборку то мы можем

00:26:44

написать текст об экспорт и наш проект

00:26:48

будет полностью сгенерирован и выгружен

00:26:51

статику вот я уже попробовал запустить

00:26:54

выгрузку статику и мы видим что вот тут

00:26:58

вы именно в папочку out попадают эти

00:27:01

файлики здесь у нас будет абсолютно

00:27:06

статичные файлы которые мы можем

00:27:09

разложить на любой хостинг и все будет

00:27:12

работать на то есть тут набор файлов

00:27:15

он

00:27:17

по приятнее чем так скажем в реакция

00:27:23

потому что тут будет каждая страница

00:27:24

которой мы опишем вот и они будут

00:27:31

определены если я тут покручу мы должны

00:27:37

где-то увидеть здесь неудобно конечно

00:27:41

смотреть на контент но вот мы видим что

00:27:43

здесь есть контент на этой странице

00:27:46

поэтому мы можем также как react

00:27:49

приложение

00:27:50

сгенерировать приложением ногтей

00:27:52

выложить его на хостинг но тут мы

00:27:56

получаем вот только статичные все

00:28:00

если нам хочется чуть больше веселья и

00:28:04

какой-то динамики то мы скорее всего

00:28:07

захотим сделать build чтобы позже

00:28:11

загрузить нашу сборку которая попала в

00:28:14

ник . next и запустить это всю красоту с

00:28:20

помощью ног старт но для этого нам уже

00:28:23

понадобиться сервер на котором есть но

00:28:26

джесс потому что проект на ногти

00:28:29

запускаются внутренне но джесс nextup

00:28:37

экспорт только для статичных сайта для

00:28:41

статичных сайтов окей получается что

00:28:44

чего чего же у нас нету по сравнению с

00:28:47

cry 3 акт об у нас не предустановлен

00:28:52

набор утилит для тестирования

00:28:56

не думаю что это что-то сложное чтобы

00:29:00

установить тестовые утилиты и выбрать

00:29:05

такие как вам нужны

00:29:07

плюс в репозитории на гэс на гитхабе мы

00:29:12

можем найти кучу примеров у них прям

00:29:14

есть папочка экземпляр

00:29:17

и если вам нужен там enzyme или тест

00:29:22

react и стинг лайбрери вы спокойны ищите

00:29:26

открываете и там все настройки есть

00:29:30

проблемы с тем чтобы поставить сюда

00:29:32

какие тестовую тельцы нет далее там был

00:29:36

из лент абсолютно тоже самое есть пример

00:29:42

о их примеры очень минималистичные они

00:29:46

пытаются показать только настройку того

00:29:49

что нужно то есть вы находите вы найдете

00:29:51

там тот же самый конфликт для и slinto

00:29:54

какие пакеты вам нужно будет поставить и

00:29:57

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

00:29:59

но до изначально этого у нас нету что

00:30:03

касается браузер лист то это как раз

00:30:07

встроена потому что что cry 3 акт об что

00:30:10

на xds под капотом

00:30:13

используют в пак который в свою очередь

00:30:17

для сборки используют бабель а бабель

00:30:20

как правило ориентируется на браузер

00:30:24

лист и все что нам нужно будет это

00:30:27

просто создать файлик браузер лист и

00:30:29

переопределить дефолтные настройки

00:30:31

которые используют next это наверно все

00:30:35

если сравнивать потому что мы получаем

00:30:39

из коробки вот но самое главное что и в

00:30:45

обычном react приложение и в next

00:30:47

приложение мы спокойно сможем работать

00:30:54

сразу же просто установил установив

00:30:57

приложение так и вижу вопрос на который

00:31:00

я могу быстро ответить будем ли мы

00:31:02

работать среда кс в этом на этом

00:31:07

вебинаре мы не будем работать три dax

00:31:09

это отдельная просто огромная тема и я

00:31:14

знаю что у многих разработчиков которые

00:31:17

пытаются его включительно x приложение

00:31:19

возникает очень много проблем потому что

00:31:22

на самом деле я бы сказал так что gps и

00:31:27

ридак смогут работать вместе они могут

00:31:30

работать вместе хорошо но как будто это

00:31:35

не самое лучшее сочетание

00:31:37

так скажем как яндекс джес плюс редакции

00:31:42

самое лучшее сочетание на мой вкус и

00:31:45

есть сейчас уже есть инструменты

00:31:48

которыми можно заменить

00:31:49

редокс и не не писать так много кода как

00:31:55

вреда axe даже если мы возьмем например

00:31:57

fedex туки там кода меньше но менеджер

00:32:02

это всегда не самое приятное что занятие

00:32:05

вот есть штуки которые заменяют managing

00:32:08

stora такие как всем известные

00:32:11

это если мы берем в графский элу мы

00:32:14

можем взять вместе с ним либо елей либо

00:32:17

пола это неплохое сочетание вот и меня

00:32:24

спрашивают сразу а какой аналог для dex

00:32:27

ds вместо ридак прям аналогов нету но

00:32:31

то с чем я конкретно использую своей

00:32:34

работе и что проверено уже ребятами

00:32:39

которые сами разрабатывают

00:32:41

неджес это swr можете посмотреть на эту

00:32:47

штуку окей я пожалуй продолжу потому что

00:32:52

ответил на последний вопрос ну тут а тут

00:32:56

такой же вопрос

00:32:57

чуть раньше был как раз я получается

00:32:59

ответил двум людям за 1 кей давайте

00:33:05

чуть-чуть пройдемся по вопросам тут еще

00:33:07

просто один вопрос есть небольшой очанки

00:33:09

автоматом генерируется не совсем уверен

00:33:12

в какой момент был задан вопрос но

00:33:16

отвечу и случае

00:33:18

cry 3 акта по и случае на их джейс взрыв

00:33:22

случай great реактор в пак настроен так

00:33:27

что там внутри себя вы пак стараются

00:33:32

генерить чанки чтобы размер одного чанка

00:33:36

был не больше какого-то размера я могу

00:33:38

ошибаться но по моему это примерно так

00:33:40

работает вот плюс он генерит чанки когда

00:33:45

мы делаем react лайзе

00:33:49

да там есть есть в реакции функции react

00:33:52

лийзи и мы через импорт динамически

00:33:54

можем подключить какой-то кусочек нашего

00:33:56

интерфейса

00:33:58

вот как раз в этот момент когда мы

00:34:01

что-то динамически подключаем кусок

00:34:03

интерфейса вот код который описывает

00:34:05

этот кусок интерфейс отрывается в

00:34:07

отдельный чанг и этот человек

00:34:09

загружается когда мы переходим в

00:34:11

конкретное место или там кликаем что-то

00:34:13

и нам нужно отобразить этот кусочек вот

00:34:18

что касается текста я кстати думал это

00:34:22

как раз обсудить самом конце про

00:34:25

шинкования

00:34:27

vx те как я уже сказал чанг генерируется

00:34:32

который шарит на все страницы туда

00:34:38

включается сам код на их джесса какой-то

00:34:43

там в упак бойлер plate react и туда

00:34:48

часто попадают в библиотеке которые

00:34:50

используются на нескольких страницах

00:34:52

вот так же как джесс может дробить вот

00:34:57

этот команд чанг на несколько чанков

00:34:59

чтобы грузить это быстрее и чанки не

00:35:03

были большого размера

00:35:05

далее что еще делает надрез до из что

00:35:10

самое главное он разбивает код по

00:35:14

страницам то есть написали какую-то

00:35:17

страницу яндекс как у нас здесь есть

00:35:20

яндекс джесс то после сборки мы должны

00:35:24

где-то где-то где-то в сборке это

00:35:29

получить да вот мы заходим в чанки

00:35:32

реджис и вот у нас есть яндекс джесс то

00:35:36

есть это ччанак который отвечает за

00:35:40

страницу яндекс нас также на самом деле

00:35:44

ей страница и error

00:35:45

оно создается автоматически и чан кпп

00:35:49

этот по сути то что оборачивает наше

00:35:52

приложение тоже создается плюс отдельно

00:35:55

создается полифилы так как тут видно

00:35:58

сборка сейчас тут еще react refresh

00:36:01

лежит у нас вот но самый главный смысл в

00:36:06

том что на мне ну тут не нужно думать

00:36:08

какой кусочек интерфейса мы хотим

00:36:11

выделить чанг мы просто создаем новую

00:36:13

страницу и новая страница всегда чанг

00:36:16

когда мы переходим между страницами в

00:36:19

дпс

00:36:20

то при переходе на 100 на другую

00:36:23

страницу мы загружаем год для этой

00:36:25

страницы и рендерим ее окей с вопросами

00:36:31

вроде разобрались написано ли pro sw на

00:36:37

хабре я не уверен но вполне возможно

00:36:39

библиотека не такая новое чтобы про неё

00:36:43

кто-то не написал да я думаю дальше мы

00:36:49

пойдем в практику и сделаем окунемся в

00:36:58

мир ник джесса посмотрим из чего он

00:37:01

сделан чем как тут я сохраню и что можно

00:37:07

использовать как вот эти страницы как

00:37:09

раз создаются как они разбиваются прям

00:37:12

на примерах поэтому давайте перейдем в

00:37:16

такой другой вид у нас тут уже браузер

00:37:21

будет чуть поменьше я чуть-чуть подвигал

00:37:26

его

00:37:27

и вот у нас здесь так проверим консоль

00:37:35

мы еще хотели проверить поддерживает ли

00:37:39

create реактор css модули давайте я

00:37:45

скажу что скорее всего поддерживает

00:37:47

потому что по моему я пробовал

00:37:49

использовать их сразу же при создании

00:37:51

поэтому я убиваю этот терминал и

00:37:56

открываю терминал снег джессом и да она

00:38:01

запустилась я еще потому что любитель

00:38:04

явно и в одном и том же месте

00:38:07

использовал и то и другое но 1 это нам

00:38:11

сегодня не должно помещу помешать зайдем

00:38:18

на localhost

00:38:20

ok вот она наша страничка пока закроем

00:38:25

консоль вот так нас приветствует них

00:38:29

джесс такое простит простейшая

00:38:32

страничка с его описанием со ссылками на

00:38:35

документацию кстати что я советую всем

00:38:38

кто хочет в принципе попробовать на gsl

00:38:41

сейчас это все рассказываю да но очень

00:38:44

классные пример и есть на самом сайте на

00:38:46

их джесс прям у них есть обучение как

00:38:49

степ бай степ пытаться что-то

00:38:51

собрать но конечно проблема как правило

00:38:55

правила этого обучения что люди начинают

00:38:58

что-то делать но не совсем понимают как

00:39:00

это работает я пытаюсь сегодня

00:39:02

рассказать конкретно как это работает

00:39:04

чтобы было больше понимание в чем смысл

00:39:07

ее где когда вызывается как работает и

00:39:11

вот больше про это так же как мы делали

00:39:16

в реакции откроем страничку исходным

00:39:20

кодом самим html

00:39:22

и вот что мы видим мы видим что

00:39:24

содержимое страницы которая и а тренда

00:39:29

лена здесь изначально но также

00:39:32

присутствует на внутри чтимой ли то есть

00:39:36

это было от рендере на сервере и

00:39:38

присланы нам уже видишь тмл также

00:39:42

вот это те самые данные которые нужны

00:39:45

для рендеринга страниц и так как

00:39:47

страница

00:39:48

индекс в props ничего не принимает ее

00:39:54

спрос ничего не рендерит то вот пэйдж

00:39:58

props здесь у нас как раз пустые также у

00:40:01

нас тут есть всякое эта информация типа

00:40:03

адреса страницы с каким к вере страница

00:40:07

была открыта и всякое остальное нам пока

00:40:12

это неинтересно окей я надеюсь вот

00:40:16

сейчас прямо четко видно что в реакции

00:40:20

сос

00:40:21

в приложении просто реактор ничего не

00:40:23

было тут у нас получился чтим и погнали

00:40:27

дальше

00:40:30

те самые функции то есть например когда

00:40:34

у нас есть главное какая-то страница

00:40:37

нашего сайта и представим что на нашей

00:40:42

странице нашего сайта

00:40:44

ну да тот странице нашего сайта да и на

00:40:48

самом деле было бы круто если бы мы

00:40:51

могли где-то в cms не знаю или в

00:40:55

какой-то админке которую написали бы

00:40:57

киндеры указывать вот эти все пункты

00:41:03

меню и редактор пришел такой гарри toys

00:41:05

типа вот это у нас неправильно вот это

00:41:07

мы и там переименуем или еще что-то и

00:41:11

после этого у нас на сайте что-то

00:41:13

поменялось она мне нужно было руками это

00:41:15

делать чтобы у нас это еще и сервера от

00:41:18

рендерилось а не запрашивал ась после того как мы

00:41:22

загрузили страницу для этого мы сделаем

00:41:28

[музыка]

00:41:32

экспорт function

00:41:36

она у нас будет асинхронная get static

00:41:41

проб

00:41:44

когда мы используем данную стране данную

00:41:47

функцию перед тем во время сборки эта

00:41:52

функция точнее будет выполнено во время

00:41:55

сборки проекта то есть результатом мы

00:41:58

получим тот же самый статический

00:42:00

статичные html это тоже

00:42:02

то что у нас как раз называется static

00:42:06

сайт generation то есть статичная

00:42:10

генерация во время сборки получаем

00:42:13

данные закидываем на страницу она

00:42:17

рендерится с теми данными которые нам

00:42:19

нужны давайте попробуем как раз

00:42:21

скопировать данные отсюда и перенести их

00:42:24

туда в эту функцию то есть в реальном

00:42:30

случае мы сделаем какой-то fetch здесь

00:42:33

мы просто для примера напишем что-то

00:42:37

свое

00:42:38

айтюнс и вот массив где у нас будет

00:42:44

документация и описание пожалуй я

00:42:53

скопирую прямо отсюда

00:43:04

так и description сделаем ok

00:43:14

далее мы должны вернуть данные которые

00:43:18

мы получили сервера или в нашем случае

00:43:21

мы просто их тут внесли в поле props

00:43:27

рисуем сидит стать дед стать их прав до

00:43:33

нужно переименовать в этом

00:43:38

ok в итоге после того как мы добавили

00:43:43

функцию get кстати про кс на страницу к

00:43:46

нам в пропсы нашей странице стали

00:43:49

прилетать данные которые мы оттуда

00:43:51

возвращаем этой томс и давайте возьмем

00:43:58

кусочек верстки

00:44:00

которые gps разработчики нам любезно

00:44:06

предоставили возьмем нашей там сделаем

00:44:12

по ним привычный для нас

00:44:15

map и ставим сюда эти данные нам нужен

00:44:24

будет тайтл который пришел и дискрипшн

00:44:28

который пришел так этот мы оставим

00:44:36

символ

00:44:39

добавим сюда описанию

00:44:45

сохраним мы видим что страницы перри

00:44:48

рендерилось

00:44:49

нам сказали что айтюнс не массив он

00:44:54

вообще антифа нет define

00:44:58

так а почему это произошло давайте

00:45:01

разбираться где static проб свернули

00:45:05

props сделаем небольшую отладку

00:45:15

[музыка]

00:45:17

обычно я это делаю чтобы быстро

00:45:20

проверить мы сделаем console.log

00:45:23

посмотрим просто все рапс и которые нам

00:45:26

пришли ну то есть реально ли они пришли

00:45:29

у нас пусто

00:45:39

то есть это либо

00:45:45

я ошибся в написании

00:45:48

либо на get static traps и нет не

00:46:03

работает поэтому я когда ты писал это

00:46:11

миллион раз и не можешь понять почему

00:46:13

это не работает и одну секунду я проверю

00:46:22

а я щас просто запущу

00:46:30

рядом открою свой рабочий проект тогда

00:46:33

что же я косячу так во время того как мы

00:46:44

с вами общаемся я пытаюсь вас чему-то

00:46:46

научить а по выглядит так как будто я

00:46:48

сам не знаю чего делаю что что я творю

00:46:51

ребята так

00:47:03

окей

00:47:05

не знаю что это варил но выглядит как

00:47:09

будто нужно было просто сохранить

00:47:13

страницу

00:47:14

нет да да этого и сохраняла но внезапно

00:47:21

заработала давайте проверим что это

00:47:24

реально работает добавить сюда единицу и

00:47:26

мы видим как странице переменилось и

00:47:31

тайтл изменился давайте проверим еще вот

00:47:35

тут такую штуку что у нас рендерится к

00:47:39

не конкретно то что мы отправились я

00:47:42

теста тег props

00:47:43

да да не только у тебя такое бывает

00:47:46

такое бывает в принципе у всех окей и

00:47:50

что мы видим здесь как раз то о чем я

00:47:54

говорил это поле

00:47:56

props печь props пойти пропуск как раз

00:48:00

те данные которые прилетают в нашу

00:48:03

страницу и

00:48:07

вот они у нас есть то есть изначально

00:48:14

отрендерится это точки м и потом

00:48:17

загружается react он берет вот эти

00:48:19

данные и начинает на них и нас

00:48:26

инициализируется прямо на них зачем

00:48:30

нужны эти данные кажется что на странице

00:48:34

уже есть и данные уже от рендеринг но

00:48:37

react будет все равно сравнивать то что

00:48:41

предела в html сервера с тем на каких

00:48:45

данных он детализируется давайте я покажу вам

00:48:49

какой-нибудь пример когда это может

00:48:53

произойти давайте проверим что код

00:48:57

выполняется на на где нас на клиенте да

00:49:05

давайте проверим что мы находимся на

00:49:07

клиенте то что винду

00:49:10

не до window не равно антифа нет define

00:49:16

так возьмем нулевой элемент нашего

00:49:20

массива тайтл

00:49:22

сделаем dogs сохраним обновим вот мы

00:49:31

получили варнинг выглядит как ошибка но

00:49:37

это у нас варнинг да он очень он нам как

00:49:40

раз говорить что на сервере было от

00:49:43

рентгена одна информация

00:49:46

но когда мы все тоже самое попытались от

00:49:49

рендерить инициализироваться на клиенте

00:49:51

данные пришли другие и тем самым на

00:49:57

экстрим сообщает что данные между двумя

00:50:01

рендеринга my

00:50:03

не консистентные и нам нужно их всегда

00:50:06

держать и на сервере и на клиенте

00:50:09

одинаковыми поэтому если мы что-то хотим

00:50:13

изменить после загрузки сначала мы

00:50:16

должны инициализироваться на данных

00:50:19

пришедших сервера а потом использовать

00:50:23

например your эфект или компонент

00:50:28

dismount

00:50:30

также из классовых пишут да я уже не

00:50:33

помню пишут последнее время только на

00:50:36

руках вот и

00:50:38

в этих методах можно уже что-то поменять

00:50:40

встреть и и перемен дарить нашу страницу

00:50:45

и почему я сказала нужно делать например

00:50:50

в usa эффекте потому что use факт

00:50:55

выполняется только на клиенте консоль

00:51:00

лак юз

00:51:04

эффект давайте сделаем внутри

00:51:11

я случайно запустил терминал думаю что

00:51:15

же случилось это был терминал и сделаем

00:51:22

здесь рендер мы сразу же видим в консоли

00:51:28

что произошел рендер то есть произошла

00:51:31

статическая генерации нашей странице в

00:51:34

этот момент вызвался рендер далее давайте почистим

00:51:38

консоль перезагрузим он нам ругается что

00:51:42

нас ключа не это давайте поправим чтобы

00:51:44

было красиво и di1 и

00:51:52

за используем здесь да иди как ключ и

00:52:01

[музыка]

00:52:08

здесь мы уже видим что выполняется

00:52:11

рендер и эффект в консоли то есть на сервере

00:52:15

только рендер в клиенте сначала рендер

00:52:19

потом дефект тем самым мы можем отделять

00:52:22

логику серверную от клиентской

00:52:27

но нужно не забывать что все что мы

00:52:31

напишем вне usa секта будет всегда

00:52:34

выполняться на сервере и с этим нам

00:52:37

нужно быть аккуратными потому что многие

00:52:41

библиотеки

00:52:42

внутри себя используют браузерный опять

00:52:45

даже просто доступ к windows может

00:52:50

ломать рендеринг на сервере потому что

00:52:57

на сервере у нас windows быть не должно

00:53:01

мы сразу же получаем 500 ошибку и

00:53:06

[музыка]

00:53:08

модификацию о том что нету винду на

00:53:10

сервере

00:53:11

убери пожалуйста но при этом перенося

00:53:14

его в же эффект он не выполнится на

00:53:18

сервере и выполнить столько на клиенте и

00:53:20

будет все красиво это самый простой

00:53:23

вариант того как мы можем добавить

00:53:25

данные которые мы где-то запросили на

00:53:28

страницу но как я сказал изначально мы

00:53:33

предполагаем что у нас есть какой-то

00:53:35

редактор и редактор будет приходить что

00:53:38

то менять но мы наверное не захотим

00:53:42

каждый раз перри выкатывать наш сайт для

00:53:44

того чтобы обновить данные но выходные

00:53:48

чувак просто

00:53:50

чет поменял и в итоге мы ждем до

00:53:55

понедельник и пока разработчик не придет

00:53:57

такой на работу окей а сейчас мы выкатим

00:53:59

все это дело до поэтому мы можем

00:54:03

использовать такой параметр как ривере

00:54:07

дейт этот параметр внутрь себя он

00:54:15

указывается в секундах то есть например

00:54:18

мы укажем 60 секунд и получится так что

00:54:23

наша страница также останется статичной

00:54:27

но после 60 секунд если кто-то пришел на

00:54:33

наш сайт

00:54:34

а на фоне перекинется и уже следующий

00:54:37

пользователи на нашем сайте получит

00:54:39

обновленную информацию и таким образом

00:54:45

наш редактор что-то поменял выходные

00:54:48

прошло 60 секунд кто то зашел страница

00:54:51

перри рендерилось получились новые

00:54:53

данные мы можем лимитировать вот это

00:54:57

время и сказать редактору ну ты короче

00:55:01

поменяешь там данные но не жди там сразу

00:55:03

что все поменяется подожди полчасика

00:55:06

воду лучше еще сделать ему какой-то

00:55:09

тестовый стенд в котором он что поменял

00:55:12

сохранил увидел как это будет выглядеть

00:55:14

на сайте и он такой же да это то что мне

00:55:17

нужно из облетит у него это улетает так скажем

00:55:21

в продакшен и тогда у нас продакшене

00:55:23

сайт тоже перри генерится вот через эти

00:55:25

60 секунд так а вместе static нельзя ли

00:55:32

эти данные например в ews стоит

00:55:35

определись не совсем понимаю если вы

00:55:38

точнейший просто чуть попозже отвечу

00:55:41

ok и вот этот параметр как раз делают

00:55:45

нашу страницу из просто статический

00:55:47

сгенерированный

00:55:50

инкрементальный статически

00:55:54

сгенерированную мы это даже можем

00:55:58

увидеть вот тут если мы запустим ран

00:56:01

build я рубил точнее увидим что у нас

00:56:07

идет оптимизация для продакшена мы

00:56:11

смогли заметить вот тут что собрались 2

00:56:14

статичные страницы и мы видим что эта

00:56:21

страница

00:56:22

а sr то есть для того чтобы иметь такую

00:56:27

страницу на нашем сервере

00:56:31

нам нужно будет запускать уже на гэс как

00:56:36

я раньше говорил через build они че то

00:56:40

есть через

00:56:41

yarn старт я рад стать чтобы она могла

00:56:46

переди не лица нам нужен not just для

00:56:48

того чтобы время от времени запускать

00:56:50

вот этот процесс пересборки для одной

00:56:52

странице и перри генерить я вот если мы

00:56:55

используем на xmp экспорт to assure для

00:56:59

нас не будет работать поэтому как только

00:57:03

мы что-то делаем более динамичное мы

00:57:06

переходим на поддержку этого с помощью

00:57:10

на джесс погнали дальше мы разобрались с

00:57:16

детства тег props

00:57:17

что мы можем это сгенерить один раз и

00:57:20

это будет не обновляться это будет

00:57:24

обновляться только в момент пересборки

00:57:26

мы можем добавить ри вылетает это будет

00:57:29

обновляться

00:57:30

через то количество времени которые мы

00:57:32

здесь указали и есть самый такой

00:57:35

продвинутый вариант это дед static props

00:57:45

тут нам уже нибудь не нужен в реале

00:57:47

дарит видит static опять то же самое

00:57:49

рассказываю вам get сервер сайт протез

00:57:52

конечно же это уже у нас будет

00:58:00

полноценная полноценный сервер сайт

00:58:04

рендеринг запускаем обратно сервер и тут

00:58:10

мы уже можем крутить такие штуки как

00:58:15

профили например рендерит профиль

00:58:17

профиль пользователя сразу же сервера

00:58:19

потому что мы на сервере можем

00:58:22

определить авторизованный человек или

00:58:25

нет если на авторизован получить его

00:58:27

профиль вернуть ему и вернуть это точнее

00:58:33

в шаблон я прям горит прям

00:58:35

сервера в чем отличие в том что конечно

00:58:39

же запускаться это все будет так же как

00:58:41

с помощью next старт но вот эта функция

00:58:48

будет отрабатывать ни один раз на сборке

00:58:50

она на сборке вообще не будет

00:58:52

отрабатывать она всегда будет

00:58:53

отрабатывать когда запущено приложение

00:58:56

то есть давайте сравним делаем дед

00:59:03

сервер сайт fraps

00:59:05

конечно нам нужно будет собрать для

00:59:09

продакшена потому что если я сейчас

00:59:11

покажу вам сравнения вот так по обновляю

00:59:14

страницу и сделала get статика fraps и

00:59:20

тоже буду тут

00:59:26

вот я опять ошибся написание да мы сюда

00:59:33

заходим это же обновляем и кажется что

00:59:37

функция get 100 тег props хотя она и

00:59:39

статичные должны выплатить один раз что

00:59:42

она выполняется каждый но так как это

00:59:46

дэв нам нужно постоянно иметь самую

00:59:49

новую информацию давайте как раз эти две

00:59:53

штуки

00:59:54

сравним в бою то есть на продакшен

00:59:59

сборки для этого мы есть ладно мы

01:00:03

скопируем файл сделаем незатейливый путь

01:00:11

индекс 1 get сервер сайт props

01:00:21

здесь оставим get static прав оставим

01:00:27

здесь давайте яндекс нет static кровь и

01:00:36

индекс 1 год сервер сайт fraps

01:00:39

теперь у нас есть две страницы и мы

01:00:44

можем сделать продакшен build чтобы

01:00:47

посмотреть это как реально будет

01:00:50

работать на сервере и

01:00:52

у клиенты которые там зайдет к нам на

01:00:56

сайт

01:00:57

я старт те приложения запущен оно

01:01:05

трехтысячным порту заходим и видим что

01:01:13

никаких консолей нам не падает на

01:01:15

главной странице только то что мы там

01:01:18

писали потому что даже тут было затерто

01:01:25

во время сборки к сожалению тоже не вижу

01:01:28

сейчас

01:01:29

а вот она вот она потерялась вот get 100

01:01:33

тег props выполнилась время сборки и так

01:01:37

и осталась тут

01:01:39

если мы мы не оставили ревалид поэтому

01:01:42

мы больше не увидим здесь get static

01:01:47

проб один раз выполнились

01:01:48

и все окей а если мы пойдем на индекс 1

01:01:53

то мы получим такую же страницу и мы

01:01:56

видим что при ее загрузке как раз

01:02:00

концовок stop сработал каждый раз когда

01:02:03

я вы вызываю страницу вот эта функция

01:02:07

она каждый раз

01:02:09

отрабатывает и здесь мы можем каждый раз

01:02:12

возвращать разные данные например

01:02:21

сделаем страшное сделаем масс рандом и

01:02:26

нам для этого конечно build теперь еще

01:02:32

попасть по нужный

01:02:33

клавиши не помню какая клавиша

01:02:40

сам персонаж вот она явно сталь

01:02:45

я ее нашел не глядя

01:02:56

да вот он появился и число каждый раз

01:02:59

меняется потому что каждый раз

01:03:01

выполняется эта функция

01:03:03

и это все суда записывается определяет

01:03:07

новые то есть если мы будем делать

01:03:09

подборку новостей которая будет

01:03:11

изменяться при каждом запросе она будет

01:03:13

прилетать новые если так же там какой-то

01:03:16

хит есть из новостей друзей то если мы

01:03:20

обновляем страницу она также будет

01:03:22

прилетать новое что же тут у нас еще

01:03:25

есть связанная сервер сайт про до

01:03:30

нужно понимать что страница которая

01:03:33

использует get сервер сайт fraps

01:03:35

будет работать медленнее чем страница

01:03:38

который использует get стати props тут

01:03:41

вообще все просто должна быть и понятно

01:03:43

потому что кстати кровь складывает

01:03:46

статичный абсолютно html прямо на диск

01:03:50

при этом дед сервер сайт props перед тем

01:03:55

как вам в принципе что то отдать она

01:03:58

выполнит функцию которая здесь

01:04:00

то есть если у нас есть какие-то запросы

01:04:02

будет это время от ница во время короче

01:04:07

пользователь запрашивает страницу он

01:04:09

ждет пока выполнится эта функция

01:04:11

тут мы делаем запросы то есть плюс время

01:04:14

мы делаем обработку данных это еще плюс

01:04:16

время после того как мы это все сделали

01:04:19

данные передаются на саму страницу и

01:04:24

сразу же будет рендериться html то есть

01:04:29

это также дополнительное время чем более

01:04:31

сложный у нас реакций использование

01:04:37

react так скажем на странице чем больше

01:04:40

у нас элементов тем дольше мы их будем

01:04:41

на сервере рендерить это то есть

01:04:44

какие-то дополнительные миллисекунды к

01:04:47

тому времени запросы и только после того

01:04:52

как яндекс джесс полностью отрендерится

01:04:55

заново страницу она начнет возвращать

01:04:58

вот тут как бы есть разница зато мы

01:05:02

имеем как бы другие плюсы

01:05:04

с точки зрения того что мы можем

01:05:07

работать с данными

01:05:09

и делать их максимально уникальными я на

01:05:14

этом моменте еще раз глянул

01:05:18

вопросы скажите вы лично обучаете да да

01:05:23

я совсем так скажем недавно начал

01:05:30

работать с love school

01:05:32

я уже проводил вебинары для учеников

01:05:35

loves cool и сейчас записываю курсы так

01:05:43

глеб привет привет глеб что еще

01:05:49

интересного тут есть на самом деле

01:05:52

прогиб static проб я сказал какую-то

01:05:57

часть но не все так как хоккей у нас

01:06:00

есть одна страница на что если у нас

01:06:02

страниц новостей их много же мы же не

01:06:05

будем для каждой страницы создавать вот

01:06:07

тут вот файлик именовать получается что

01:06:12

нам для всех новостей нужно создавать

01:06:15

кучу файликов но как то не очень звучит

01:06:19

поэтому мы будем здесь использовать так

01:06:23

называемый динамический роутинг мы

01:06:26

создадим папочку news и в ней папочку

01:06:30

например айди

01:06:34

нет мы ему джесси пишем суре я забываю

01:06:42

иногда что пример делаю на джесси они на

01:06:45

даты на тип скрипте окей что происходит

01:06:50

в случае когда мы создаем amv алекс вот

01:06:53

таким именем

01:06:55

квадратные скобки в названием файла

01:06:58

означают то что параметр айди будет

01:07:01

динамическим созданные файлы на диске

01:07:07

будут означать что это новые страницы то

01:07:12

есть у нас должны появится страница

01:07:15

который будет располагаться где-то после

01:07:19

slash news flash и какой-то иди

01:07:23

тут секс начинается самая интересная

01:07:25

потому что как раз те новости которые у

01:07:29

нас есть мы скорее всего знаем и наш

01:07:34

наши cms или наш бэкон знает или не

01:07:38

важно даже не статьи какие-то любые

01:07:39

другие там у нас есть каталог товаров и

01:07:42

мы просто можем получить список всех

01:07:49

этих товаров за 1 пасс вроде так так я

01:08:04

сразу напишу и да тоже вот такая функция

01:08:10

она обычно используется рядом с get 100

01:08:13

тег props что она делает здесь мы должны

01:08:18

сделать запрос к серверу и сказать ему

01:08:21

дай нам пожалуйста список всех новостей

01:08:25

который у тебя есть после того как он

01:08:30

нам отдал список новостей

01:08:32

мы тут можем сделать например const

01:08:37

news предположим что они у нас есть и

01:08:43

круто когда сервера дает сразу то что

01:08:45

нужно но не всегда это так бывает

01:08:47

поэтому мы возьмем news сделаем по ним

01:08:50

map и вернем объект в котором напишем

01:08:57

params params нет мы напишем айди когда

01:09:03

ты забываешь то что они не используешь

01:09:06

дома из news достанем например ради и

01:09:13

[музыка]

01:09:15

все-таки params нам нужен

01:09:18

я сейчас еще краем глаза гляну правильно

01:09:22

ли я написал да вот такая конструкция

01:09:27

получается что нам нужно внутри где-то

01:09:29

тег props

01:09:30

все я заговариваюсь get static пас нам

01:09:34

нужно сделать такой список который будет

01:09:37

описывать наши статьи с точки зрения их

01:09:42

иди то есть мы получили 100 статей 100

01:09:45

новостей неважно сделали из них список в

01:09:50

котором лежат параметры и главный

01:09:53

параметр который нам нужен в нашем пути

01:09:55

это иди после того как эта функция

01:09:58

выполнится этот список путей будет

01:10:02

обработанных стон и потом никс запустит

01:10:06

такой же

01:10:08

ну какой то цикл и что он будет делать

01:10:12

он будет передавать

01:10:14

айди внутрь функции гетто тег props мы

01:10:19

будем доставать

01:10:20

этот айди из контекст params иди и

01:10:26

получается что мы теперь знаем де статьи

01:10:30

который нам нужно запросить мы будем

01:10:31

делать const

01:10:35

артикул равно это какой-то имеет

01:10:40

какой-то fetch за статьей

01:10:47

то есть и предположим что у нас там

01:10:49

почти tps какой-то экзампла

01:10:53

ком есть и он вам отдаёт

01:10:58

news в джейсоне

01:11:04

так подсказки мне мешают экран маленький

01:11:09

ничего не видно да там и еще конечно

01:11:14

сделаем тот самый

01:11:16

д

01:11:17

[музыка]

01:11:20

что там еще то будет у нас еда response

01:11:23

и преобразовать джейсон ну чтобы было

01:11:28

красиво так скажем окей

01:11:33

получили одну конкретную статью и мы ее

01:11:37

вот здесь можем потом вернуть в таком

01:11:41

случае у нас получается что мы формируем

01:11:44

список статей

01:11:45

потом для карт и кидаем их наш шаблон и

01:11:50

для каждой статьи будет на рендеринг

01:11:52

html и в папочке

01:11:59

next у нас будут статичные числе и вольф

01:12:04

валики для каждой из статей если

01:12:06

пользователь придет по правильному углу

01:12:09

с нашим айди то получит статью

01:12:12

если нет то получится страничку как раз

01:12:15

ту что я показывал error

01:12:19

потому что на x сам определит что он не

01:12:22

нашел эту страницу и отдаст ему

01:12:25

четыреста четвертую ошибку

01:12:28

примерно так это все будет работать

01:12:32

сколько у нас времени у нас на самом

01:12:34

деле времени по моему уже не так много я

01:12:38

думал что можно будет прям показать на

01:12:42

примере статьи

01:12:45

вот но давайте посмотрим если у вас еще

01:12:48

вопросы и спросим если у нас еще время

01:12:53

чтобы может быть сделать пример со

01:12:54

статьями сейчас возьмем какое-нибудь api

01:13:00

и сделаем прям набор страничка тренд

01:13:10

dream

01:13:14

так правда про и время я думаю задержка

01:13:18

поэтому не не отвечают мы пока

01:13:20

что-нибудь попробуем с этим поделать

01:13:25

если вот этот личный вопрос если список

01:13:28

статей потом изменится мы делаем просто

01:13:35

параметру параметр rival идей и

01:13:41

подожди сейчас там нужно немножко другое

01:13:46

наверное будет использовать параметр то

01:13:51

есть ревели дэйт нам обновляя только

01:13:54

текущую статью которую уже есть и будет

01:13:59

в таком случае всегда одинаковый набор

01:14:06

статей мы можем здесь в get стать их пас

01:14:11

сказать на самом деле это обязательно

01:14:14

про это забыл fall back

01:14:16

и вот сюда можно три параметра передать

01:14:19

true force еще бывает фолз и

01:14:27

blocking на самом деле достаточно

01:14:33

интересная вот штуку делает этот

01:14:36

параметр когда мы делаем fall back true

01:14:40

это значит что полученный список статей

01:14:43

один раз получится и они сами статьи уже

01:14:47

получены могут перед генерируется в

01:14:49

случае использования его людей но новые

01:14:52

появляться не могут и в этом случае все

01:14:57

несуществующие

01:14:58

статьи будут даваться как 404

01:15:03

если мы укажем files to мы можем даже

01:15:11

вот тут такой сделать хакк не возвращать

01:15:15

паз и но тогда у нас во время сборки

01:15:18

небу не будут за собранно страницы

01:15:20

а не когда придет пользователь начнет

01:15:23

пользователи начнут обращаться к нашему

01:15:25

сайту статьи начнутся за

01:15:27

отцы им отдаваться но тут как раз прикол

01:15:32

в том что отдастся скелет странице

01:15:36

покажется на нем загрузка сгенерируется

01:15:39

вот этот кусочек

01:15:40

статьи и асинхронная воткнется вот а

01:15:45

если мы укажем fall back blocking the

01:15:51

генерация страниц через static вас будет

01:15:56

работать в принципе также как сср то

01:15:59

есть мы приходим на страницу если

01:16:03

странице

01:16:07

короче да если страница устарела

01:16:10

он сразу же через сср сгинь элит эту

01:16:13

страницу и отдаст первому пользователю

01:16:16

остальным пользователям последующем он

01:16:18

уже отдаст статические чтим иль то есть

01:16:20

на серве ничего не будет происходить

01:16:22

потом опять какое-то время прошло опять

01:16:25

кто-то запросил страницу как сср она от

01:16:27

рендер лис и текущему ушла вот это

01:16:29

основное на самом деле

01:16:31

отличие blocking от не ну то есть от

01:16:33

блокирующие

01:16:34

перри регенерации и не а блокирующий

01:16:37

случае не блокирующий

01:16:40

обычно фоне перри генерится все и

01:16:43

добрасываем до клиента

01:16:45

асинхронном то есть как будто мы ее под

01:16:47

подгрузили чуть позже

01:16:49

с блокированием она сразу же отобразится

01:16:54

вот но на самом деле это очень

01:16:56

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

01:16:59

blocking возвращаем пустой массив паз у

01:17:03

нас при генерации сайта вообще не одна

01:17:07

статья не генерится когда все

01:17:09

разложилось каждый первый пользователь

01:17:11

заходит на страницу и они генерятся

01:17:15

только в этот момент дальше они будут

01:17:18

переедет середине лица только

01:17:23

когда мы укажем так я пойду по очереди в

01:17:28

каких случаях на ваш взгляд

01:17:29

использования никс оправдана для каких

01:17:33

проектов он не подходит да дайте мне

01:17:38

волю я буду везде индекс использовать

01:17:40

потому что мы получаем на мой взгляд

01:17:46

роутер из коробки который удобнее чем

01:17:51

react роутер нам не нужно вот эти вот

01:17:53

вложенные пути городить внутри джей

01:17:56

сэкса

01:17:57

мы можем просто файлики создавать и так

01:17:59

определять наши странички мы можем

01:18:04

генерить если мы делаем просто сингл

01:18:07

поить applications мы можем генерить

01:18:09

скелеты для каждой нас наших страниц то

01:18:11

есть пользователь зашел на страницу и у

01:18:14

него появляется скелеты и и мы в него

01:18:17

что-то загружаем то есть как обычно

01:18:21

делают в подходе из по происходит вот

01:18:26

этот вот загрузка долгая всего джесс а

01:18:28

потом джей с такой про инициализировал

01:18:31

ся я на рендерил скелет а потом в него

01:18:33

получил данные на мемориал длина

01:18:35

рендерил данные

01:18:36

то тут пользователь сразу же чтимой

01:18:39

получил следом и ждет когда загрузится

01:18:42

html + что он ждет джесс и когда он до

01:18:48

запросит данные вот это прикольно и мы

01:18:52

можем также как я говорил статично

01:18:53

сгенерировать сайт полностью вот в такую

01:18:57

папочку и получить такой испей который

01:19:01

чуть чуть был приди не рен вот в

01:19:04

остальном отличие от обычного react

01:19:07

приложения в цион не будет и также мы

01:19:14

будем опять же можем когда нам нужно

01:19:16

будет вдруг использовать какой-то

01:19:17

серверный рендеринг мы это всегда можем

01:19:19

докрутить у нас то есть всегда в запасе

01:19:21

есть куча фич которые мы можем докинуть

01:19:26

в нашу копилку как next поймет что

01:19:30

страница устарела

01:19:31

вот тут важный вопрос

01:19:35

что стране он не поймет где страница

01:19:39

устарела сам если ты не скажешь ему

01:19:43

ривере дэйт как раз вот этот параметр

01:19:47

или выливали do it и мы скажем что 60

01:19:50

секунд и он не понимает данные устарели

01:19:54

или нет он просто раз в 60 секунд

01:19:56

говорит что окей давай попробуем переди

01:20:00

не лица ему не важно обновились данные

01:20:02

не обновились он просто получить данные

01:20:04

впереди ниже страницу и все было бы на

01:20:10

самом деле классно если бы появилась

01:20:11

такая фича что backend но бы к ней

01:20:15

что-то изменилось он говорит на xp

01:20:19

регенерирует у страницу и то есть у нас

01:20:22

гений страница переди не лица не раз какое то

01:20:24

время а только когда изменились данные

01:20:26

на сервере вот это было вообще супер

01:20:28

круто если бы такое в акте появилась так

01:20:35

какой параметр там где нужно серу ну вот

01:20:42

опять же я говорю что текст это не

01:20:45

только просела просела да это абсолютно

01:20:49

точно что поисковики будут отдавать

01:20:53

предпочтение все-таки

01:20:54

страницам на которых которые заранее при

01:20:57

при деренда раны были и в которых есть

01:21:00

все мы но ощущение от того насколько

01:21:04

быстро загружается страница снег в том

01:21:07

намного ощущение она приятнее потому что

01:21:13

у тебя сразу же контент появляется они

01:21:16

когда-то потом мы то есть у тебя долго

01:21:18

висит белый экран и там хоп появляется

01:21:23

страница

01:21:25

а тут сразу же она прогружается если

01:21:28

медленный интернет то страницы у нас

01:21:30

когда она рендерится она же может

01:21:32

рендерится прям поблочно

01:21:34

и как только html появляется браузер

01:21:38

будет ее трин рендерить вот спейд

01:21:41

приложением такого никогда не будет он

01:21:43

будет ждать до победного пока я там 3

01:21:45

мегабайт

01:21:46

java script они скачал кстати могу вам

01:21:49

показать интересный факт что вот мы

01:21:53

смотрели там был отчет потому как какого

01:21:57

размера страницы вообще получаются там

01:22:01

что-то в районное в районе 60

01:22:04

ну и там число но вот этим вот этой

01:22:07

штукой

01:22:08

давайте лучше наверное поговорим я

01:22:12

рассказываю что еще есть так controls

01:22:21

навряд ли такой появится это надо

01:22:24

дергать сервер со стороны

01:22:26

данных да я и говорю что вот где данные

01:22:29

лежат то есть сервер с данными дергает

01:22:33

сервер на котором стоит

01:22:36

gps вот так у нас тут есть наши страницы

01:22:46

сразу же что интересно написано размер

01:22:50

страницы 1 и и загрузки то есть когда мы

01:22:52

refresh им страницу или заходим по

01:22:53

прямой ссылке

01:22:54

именно такой размер файла будет файлов

01:22:59

всех будет загружен мы видим размер

01:23:03

общих файлов между страницами и

01:23:07

says как раз он рассказывает про то во

01:23:10

сколько кода написано для конкретной

01:23:12

странице вот как раз мы видим фреймворк

01:23:19

чанг отдельное мы видим отдельный чанг в

01:23:24

пока который там все это внутри себя

01:23:26

генерит отдельный ччанак для а п.п.

01:23:29

то есть само приложение мы сейчас не

01:23:32

создавали его

01:23:33

она создана уже да это файл который

01:23:37

оборачивает каждую из наших по сути

01:23:39

оборачивает каждую из наших страниц то

01:23:41

есть открывая индекс в роли компонента

01:23:44

суда прилетает компонент home

01:23:49

будет сюда прилетать apache pro ops это

01:23:52

про 5 как раз которые прилетают из get

01:23:56

static проводит сервер сайт про все

01:23:58

неважно и прикидывается как раз наш

01:24:00

компонент тут мы можем даже с ними

01:24:02

поиграть как раз вот когда меня там

01:24:04

спрашивали про редокс обычный ридак

01:24:07

entirely рази руется где-то здесь потому

01:24:10

что здесь прилетают данные мы сразу их в

01:24:12

сток закидываем тут же оборачиваем

01:24:15

страницу в контекст и потом на странице

01:24:19

уже из контекста редакторского мы

01:24:23

достаем данные которые нам нужны или

01:24:25

dispatch им их туда вот но мне такой

01:24:29

подход не нравится как минимум потому

01:24:31

что чтобы получить вот здесь правильный в

01:24:35

правильную структуру данных которая

01:24:36

подходит для нашего react

01:24:38

стэйта на клиенте или в принципе когда

01:24:41

мы рендерим страницу на сервере нам

01:24:43

нужно из get static проб секрет сервер

01:24:46

сайт fraps вернуть такую такую структуру

01:24:49

который повторяет структуру нашего stora

01:24:52

поэтому мы на сервере скорее всего

01:24:53

создадим наш штор и будем работать ним

01:24:57

на сервере то есть при холодной загрузки

01:25:00

мы будем создавать первый раз top get

01:25:02

сервер сайт прост dispacci туда данные

01:25:07

потом делать дед state возвращать их

01:25:11

оттуда потому что эти данные обычно в

01:25:14

джейсон загоняются они потом сюда

01:25:17

прилетают эти данные и мы заново делаем

01:25:21

штор и закидываем их туда два раза за

01:25:26

один рендеринг получается создание

01:25:28

сторону по моему как то не очень

01:25:30

оптимально если мы реально думаем о том

01:25:33

сколько времени будет рендериться наш

01:25:35

страница

01:25:41

так я вижу что самый активный

01:25:45

пользователь наш сегодняшний перестал

01:25:50

задавать вопросы других не уверен что у

01:25:56

нас еще будет вот у нас уже как раз

01:25:59

время к полтора часа подходит да я думаю

01:26:06

мы на этом будем заканчивать всем

01:26:08

спасибо что смотрели спасибо всем кто

01:26:11

будет смотреть это в записи

01:26:14

надеюсь вам мой рассказ был полезен как

01:26:20

я всегда завершаю наверное свои выступления я

01:26:23

говорю что вы молодцы все что то что

01:26:26

послушали это сто пудов чему-то из этого

01:26:30

научитесь

01:26:31

но в любом случае сходите и проверьте то

01:26:33

что вам рассказали реально ли это так и

01:26:36

в общей не наврал ли вам человек потому

01:26:40

что сейчас есть куча статей которые

01:26:44

пишутся

01:26:45

людьми которые вчера начали

01:26:46

программировать и не все в интернете

01:26:51

правда здесь вот и даже не то что правда

01:27:00

человек первый раз

01:27:02

инструмент увидел попробовал и сразу

01:27:04

бежит его расхваливать потом еще 10

01:27:07

человек

01:27:08

таких же неопытных его расхваливают и

01:27:10

оказывается что она становится

01:27:12

инструмент который не самый удобный и не

01:27:15

самый хороший

01:27:17

что-то действительно крутое пропала в

01:27:22

глубинах интернета что можно почитать

01:27:25

для новичков кроме документации

01:27:31

да я вижу хорошие

01:27:33

вот я попробую приложить материалы к

01:27:39

этому вебинара мы наверное в

01:27:41

комментариях их куда-нибудь

01:27:43

положим но проблема в том почему я как

01:27:47

бы и захотел провести так этот рассказ

01:27:50

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

01:27:53

что на русском языке и

01:27:55

информации о нем практически нету то

01:27:58

есть все что я смогу вам дать это будет

01:28:00

на английском языке есть какие-то курсы

01:28:05

проблема в том что курсу тоже так же как

01:28:08

статьи имеют свойство устаревать и за

01:28:11

последний год на их gendos очень сильно

01:28:13

развился и там все стать им вам на

01:28:19

многих вещах можно было бы переписать

01:28:23

как только по вы бы попрощался со всеми

01:28:26

носили писать в чат лучше примеры

01:28:31

готовые рабочие приложения с нуля как я

01:28:35

уже говорил заходите нагих об в

01:28:39

репозиторий на экспресс там куча

01:28:42

примеров с блогами

01:28:45

с разными cms с которыми можно эти

01:28:49

примеры можно сразу себе поставить ими

01:28:52

поиграться что-то поменять вот там все

01:28:57

что я описал в принципе есть также там

01:29:01

есть любые свистелки которые вы хотите

01:29:04

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

01:29:09

случайно искал его лосева да ну это

01:29:13

популярная тема и многие используют его

01:29:18

в первую очередь

01:29:19

и и засела но я считаю что сел это не

01:29:23

единственная вообще-то дает gps но это

01:29:28

отличный point для того чтобы

01:29:29

использовать его на каких-то сайтах

01:29:32

опять же любые так скажем блоги и

01:29:39

новостные сайты могут быть спокоен и

01:29:41

собран и на nike jersey и одним из самых

01:29:45

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

01:29:48

бангла и

01:29:49

это заменить

01:29:52

react на при акт просто при сборке в

01:29:56

продакшен то есть чтобы тебя все

01:29:59

работало на реакции когда ты

01:30:03

разрабатываешь

01:30:04

а потом в продакшн поменяешь это на

01:30:07

react благо сейчас

01:30:09

api одинаковый и размер бангла 66

01:30:12

килобайт уменьшается вдвое если что вы

01:30:16

можете найти меня на гитхабе и там есть

01:30:19

разные примеры в том числе с при актом

01:30:26

все найду я думаю на этом уже точно все

01:30:28

всем спасибо всем пока

01:30:31

еще что-нибудь обязательно запишем для

01:30:35

вас

Описание:

Освойте профессию frontend-разработчика: https://loftschool.com/professions/frontend-developer 17 февраля 2021 года в 20:00 пройдёт открытый вебинар на тему: "Next.js с нуля". Автор: Павел Минеев, June Homes, Frontend teamlead Вебинар будет состоять из двух частей: 1. Теория: – Что такое Next.js и зачем он нужен – Сравнение SPA с SSG/SSR 2. Практика: – Разворачивание проекта на Next.js – Сравнение с Create React App – Static Site Generation – Incremental Site Generation – Server Side Rendering Занятие рассчитано на новичков знакомых с React. Подпишитесь на канал и поставьте напоминание, чтобы не пропустить. Таймкод: 0:00 Начало 03:42 О себе 4:29 Что такое Next.js? 7:45 Собранное React приложение 8:35 Загрузка и инициализация SPA 10:31 Собранное Next приложение 12:24 Загрузка и инициализация SPR/SSG 15:40 Проверка в браузере 21:33 Dev окружение 36:54 Практика

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Next.js с нуля"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Next.js с нуля" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Next.js с нуля"?

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

Как скачать видео "Next.js с нуля" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Next.js с нуля"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Next.js с нуля"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

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