background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "How NextJS REALLY Works"

input logo icon
"videoThumbnail How NextJS REALLY Works
Оглавление
|

Оглавление

2:11
Control Flow
8:00
Server Side Props
9:53
Can I Easily Disable Javascript on the Page
14:10
Url Metadata Checker
17:02
Media Queries
23:48
Conditionals
Похожие ролики из нашего каталога
|

Похожие ролики из нашего каталога

Теги видео
|

Теги видео

web development
full stack
typescript
javascript
react
programming
programmer
theo
t3 stack
t3
t3.gg
t3dotgg
nextjs
next
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:00
Как на самом деле работает next, может
00:00:02
показаться глупым вопросом, который он реагирует
00:00:04
на сервере, что нужно знать
00:00:05
об этом, ну, я нашел много
00:00:07
вопросов, которые я получаю о людях, которые
00:00:09
строят с использованием стека T3, и о том,
00:00:11
откуда берутся технологии, которые мы здесь рекомендуем фундаментальное
00:00:13
непонимание того, как на
00:00:15
самом деле работает сам next и отличается от старых способов
00:00:18
развертывания таких вещей, как создание
00:00:19
приложения реагирования или развертывание одностраничного приложения,
00:00:22
что отличает next, как мы должны об
00:00:25
этом думать и как данные
00:00:27
на самом деле передаются через next.js в ваше
00:00:29
приложение реагирования
00:00:30
давайте поговорим об этом,
00:00:34
этот большой старый дамп в HTML,
00:00:37
вот содержимое того, что
00:00:40
возвращает реквизиты на стороне сервера. О боже, я
00:00:42
рад, что вы здесь для этого потока и
00:00:43
видео, потому что вся суть в том,
00:00:45
что SSR - это просто Первый шаг,
00:00:50
поэтому
00:00:51
следующий JS, как мы знаем, представляет собой серверную
00:00:54
структуру для реагирования на версию tldr:
00:00:58
вы пишете код реагирования, и прежде чем он попадет
00:01:00
к пользователям, он запускается на сервере, чтобы
00:01:02
пользователь получал страницу, которая действительно имеет
00:01:04
содержимое страницы. если я пойду
00:01:07
куда-нибудь, например, у
00:01:08
меня есть одно, например, простое
00:01:11
приложение Veet, развернутое где-то, что
00:01:13
мы сделали,
00:01:14
так что это приложение, созданное с использованием
00:01:16
Veet, обычно вы помещаете параметр запроса для
00:01:20
часов, минут и секунд, я ленив,
00:01:22
не делайте этого. мне хочется это сделать, важная
00:01:24
деталь, которую здесь нужно знать, заключается в том, что HTML-код,
00:01:26
который поступает на сервер,
00:01:27
не содержит содержимого страницы,
00:01:29
поэтому, если я перейду на вкладку «Сеть» и действительно посмотрю на
00:01:33
HTML-код, который мы получили с сервера,
00:01:34
вы увидите, что это HTML похож на до
00:01:37
смешного пустой, имеет корень идентификатора div, в котором
00:01:40
ничего нет, причина этого в том, что
00:01:43
содержимое страницы не создается на
00:01:45
сервере, а создается на клиенте. Эта
00:01:47
страница представляет собой почти инструкции по
00:01:49
созданию веб-сайта и большую часть эти
00:01:51
инструкции содержатся в этом
00:01:53
файле index.js. Этот файл ресурсов
00:01:57
представляет собой набор JavaScript, который мы объединили и который
00:02:00
мы создали, когда что-то было развернуто
00:02:01
на Versal,
00:02:03
и этот JavaScript загружается
00:02:05
клиентом, а затем запускается для создания страницы,
00:02:09
которую видит пользователь. Итак, поток управления
00:02:12
здесь, если я быстро открою экскалатор, э-э,
00:02:15
поток реакции Спа: я нарисую стрелку
00:02:20
вниз вверху, вот запрос низа
00:02:22
HTML-страницы. Мне слишком лень рисовать их
00:02:25
здесь,
00:02:26
но первый шаг - пользователь получает HTML
00:02:30
с тегом JS, следует указать, что это
00:02:33
пусто, поэтому на первых шагах пользователь
00:02:35
получает пустой HTML в тег JS, пользователь
00:02:39
загружает.js из jstag Js из или запускает JS,
00:02:44
начинает извлекать данные и создавать страницу.
00:02:48
Мне придется сделать более длинную стрелка
00:02:49
для этого в конечном итоге данные возвращаются. JS
00:02:53
завершает рендеринг страницы, а затем, наконец,
00:02:56
завершает страницу с правильным HTML, чтобы
00:02:59
перейти от пользователя, делающего запрос, к
00:03:02
этой сгенерированной правильной странице, мы должны
00:03:05
загрузить здесь JS из HTML, поэтому на этом
00:03:08
этапе мы скажите HTML здесь, но неправильно,
00:03:11
поэтому на данный момент HTML здесь, но он
00:03:13
неверен, он не отражает то, каким
00:03:15
должно быть содержимое страницы, он
00:03:17
представляет собой статический кэшированный актив, содержащий только
00:03:20
часть содержимого страницы, и
00:03:22
пока все это не произойдет, это
00:03:23
не работает, или это не та
00:03:25
страница, и чтобы получить правильную страницу, нужно пройти весь путь сюда,
00:03:27
потому что клиенту
00:03:29
нужно совершить еще одно обращение к серверу для
00:03:31
получения данных. Я мог бы поместить строку на самом деле
00:03:33
для каждой точки, для которой требуется дополнительный
00:03:36
запрос или необходимо сделать набор запросов,
00:03:37
поэтому запрос 1 происходит
00:03:39
здесь вверху, а затем они получают HTML, затем
00:03:42
они запрашивают JS здесь, так что это
00:03:45
запрос для этого JavaScript, а затем,
00:03:47
как только JS приходит и запускается, он должен
00:03:49
запросить фактический данные для
00:03:50
содержимого страницы, поэтому первое, что вы
00:03:52
здесь получаете, это HTML. Сначала извлекайте HTML,
00:03:56
затем извлекайте JS, затем извлекайте данные,
00:04:01
необходимые для страницы, и, наконец, после
00:04:04
всех этих шагов вы получаете полную
00:04:06
страницу с правильным HTML, поэтому каждый
00:04:09
из них, который вы запрашиваете на сервере, вы
00:04:11
получаете HTML, вы делаете что-то, вы
00:04:13
снова запрашиваете сервер, вы получаете немного JavaScript,
00:04:15
вы делаете что-то, вы запрашиваете данные,
00:04:18
которые возвращаются снова, и теперь вы можете
00:04:20
фактически завершить рендеринг страницы, но
00:04:21
каждый из этих шагов это потому, что
00:04:23
сервер не генерирует HTML для каждого запроса
00:04:25
по этому запросу. Во-первых,
00:04:28
сервер не знает, чего вы хотите, он
00:04:29
не знает, что запрашивает пользователь,
00:04:31
он просто передает им HTML-страницу и
00:04:33
оттуда HTML. страница может загрузить
00:04:36
JavaScript, а затем на основе этого JavaScript
00:04:37
выяснить, что она на самом деле должна
00:04:39
делать, но все эти шаги должны
00:04:42
произойти на устройстве клиента, прежде чем можно будет
00:04:45
отобразить правильную страницу. Целью следующего
00:04:47
JS было предотвратить это, поэтому, если я пойду здесь
00:04:51
и скажите поток данных next.js, что
00:04:54
делает next.js. Я собираюсь удалить все эти
00:04:56
строки. Я просто удалю все
00:04:57
это, потому что большая часть информации здесь
00:04:58
неверна, поэтому пользователь запрашивает страницу, и что
00:05:02
здесь происходит, когда пользователь запрашивает
00:05:03
страницу, зависит от того, как вы настроили все
00:05:06
в xjs, но мы предполагаем, что ваш сервер
00:05:09
отображает каждую страницу, а сейчас мы
00:05:10
разберемся, что это значит и почему вы, возможно,
00:05:12
не захотите делать это через минуту, а
00:05:14
пока мы скажем, что следующий сервер также получает
00:05:18
запросы, получает реквизиты на
00:05:23
стороне сервера. Функция получения реквизитов на стороне сервера — это
00:05:25
код сервера, который запускается, когда пользователь
00:05:27
запрашивает страницу, поэтому, если я запрашиваю страницу,
00:05:29
например, я запрашиваю, я просто
00:05:31
измените его, пользователь запрашивает косую черту, пользовательскую
00:05:34
косую черту Тео, чтобы пользователь запрашивал косую черту, пользователь
00:05:37
Тео, следующий сервер угадает запрос, и
00:05:39
он запускает функцию получения реквизитов на стороне сервера,
00:05:41
которая находится в этом файле страницы,
00:05:44
который получает сервер, который говорит, что функция реквизита,
00:05:46
вероятно, принимает идентификатор пользователя из
00:05:48
запроса параметр в этом случае косая черта Тео,
00:05:51
он запускает это против чего-то
00:05:52
вроде базы данных, чтобы получить некоторые данные, а
00:05:55
затем возвращает это в качестве реквизита специально для этой
00:05:57
страницы,
00:05:58
чтобы он мог отобразить это в
00:06:01
HTML, чтобы ваш код реакции работал
00:06:05
здесь, на сервере поэтому реакция запускается на
00:06:08
сервере с использованием свойств из
00:06:12
реквизитов на стороне сервера. Это означает, что
00:06:15
фактическая страница HTML, содержащая
00:06:18
информацию, которую вы хотите, чтобы HTML
00:06:21
имел на ней, запускается и генерируется на
00:06:23
сервере, затем сервер отправляет правильный
00:06:27
HTML пользователю на основе то, что
00:06:30
отображает этот код реагирования, а затем пользователь загружает
00:06:32
HTML, а затем загружает JS, чтобы догнать то, что
00:06:37
отрисовал сервер, этот шаг догона -
00:06:39
очень важная часть, догонять - это
00:06:41
термин, обозначающий его гидратацию, потому что,
00:06:44
когда ваш клиент не отображает
00:06:47
вся страница просто получает HTML, который
00:06:51
изначально правильный, вы все равно хотите, чтобы все
00:06:53
изменилось, как в реакции, если у меня есть крючок,
00:06:55
который отображает учетную запись, и я хочу, чтобы он
00:06:58
поднимался каждый раз, когда пользователь нажимает, но
00:07:00
сервер отображал его как ноль, я все еще хочу, чтобы это
00:07:02
увеличивается, когда я нажимаю на него на
00:07:03
стороне пользователя,
00:07:05
вы берете HTML-код, полученный с
00:07:07
сервера, и гидратируете его с помощью
00:07:09
JavaScript, чтобы гидратация
00:07:11
работала, необходимо точно знать, какие
00:07:14
свойства были переданы для генерации этого
00:07:15
HTML, потому что, по сути,
00:07:17
когда вы увлажняете и реагируете, он
00:07:19
регенерирует тот же HTML в реакции, поэтому
00:07:23
он знает, что элемент на странице
00:07:26
соответствует этому виртуальному элементу в нашем
00:07:28
виртуальном Доме, поэтому он может делать обновления с
00:07:30
этого момента и далее. шаг этого H этот
00:07:33
шаг гидратации занимает примерно столько же времени, сколько и
00:07:36
шаг рисования здесь, где вы на
00:07:39
самом деле генерируете и запускаете этот
00:07:41
код, чтобы выяснить, что вам нужно
00:07:42
получить, а затем получить это и еще много чего, для
00:07:44
гидратации требуется столько же времени, однако
00:07:46
страница уже существует и пользователь
00:07:49
уже что-то видит, и он,
00:07:51
вероятно, читает содержимое этой
00:07:52
страницы, поскольку все остальное обновляется
00:07:54
незаметно, и к тому времени, когда он что-то
00:07:55
нажимает, весь JS
00:07:58
загружается и правильно увлажняет страницу,
00:07:59
но как насчет серверной части props, если у
00:08:02
вас есть реквизиты на стороне сервера, и они
00:08:04
возвращают некоторые данные, которые используются для рендеринга
00:08:06
страницы, как копия этого
00:08:09
пути рендеринга, работающая на
00:08:11
клиенте, знает об этих данных, вот здесь
00:08:13
все становится немного хакерским, а, мне нужно
00:08:16
есть страницы, на которых есть реквизиты на стороне сервера,
00:08:17
которые я могу быстро продемонстрировать. Я думаю, что
00:08:19
ping — это круто, поэтому вот страница вызова Ping
00:08:22
для меня, и если я зайду сюда, я
00:08:26
на самом деле зайду в HTML, я найду
00:08:28
тег сценария где-то в здесь я на самом деле
00:08:30
в голове, может быть, не следующие данные здесь
00:08:32
мы это здесь
00:08:34
этот большой старый дамп в HTML вот это
00:08:38
содержимое того, что возвращает реквизиты на стороне сервера.
00:08:42
это опущено в HTML,
00:08:45
потому что это необходимо для
00:08:47
запуска JavaScript на клиенте, чтобы знать,
00:08:49
что использовалось для рендеринга страницы, чтобы она
00:08:52
могла правильно увлажнять и синхронизировать
00:08:54
клиент с сервером, это, возможно,
00:08:57
важный хак, который nexjs делает,
00:09:01
чтобы сделать все это возможным, так что
00:09:03
волшебная штука вот в чем.
00:09:05
о том, как работает nexjs, вы, возможно, не знали, так
00:09:07
это то, что эта страница может
00:09:10
отображаться только на клиенте после сервера,
00:09:12
поскольку данные, необходимые для визуализации этой
00:09:14
страницы, были включены в сам HTML, поэтому
00:09:17
основным преимуществом здесь и далее
00:09:20
является то, что правильный данные находятся
00:09:23
на странице, когда они отображаются для пользователя, в
00:09:25
первый раз, когда у вас нет пустого
00:09:28
всплывающего окна, которое затем показывает правильный
00:09:30
контент, например, если я захожу на Twitch прямо сейчас,
00:09:32
вижу это состояние загрузки, это
00:09:34
состояние загрузки, если я скользю по своему сеть, вы
00:09:37
можете видеть это еще больше или, ну, как
00:09:39
преувеличение, я включу Fast 3G, и
00:09:42
вы увидите, что здесь есть состояние,
00:09:43
похожее на счетчик загрузки, о, вау,
00:09:45
наличные на столе, и постучите по нему, чтобы замедлить, вы
00:09:47
увидите, что там есть состояние
00:09:49
где JS еще не загружен, и у него
00:09:51
просто есть это, как верхняя навигация, могу ли я легко
00:09:54
отключить JavaScript на странице,
00:09:58
круто,
00:10:00
если я обновлю, да, вы увидите, что
00:10:02
JavaScript отключен,
00:10:04
и из-за этого мы никогда не получим
00:10:06
дополнительные данные,
00:10:08
если я перейду к вот я иду сюда и отключаю
00:10:12
JavaScript,
00:10:13
он все равно будет зависать на счетчике загрузки,
00:10:15
но фактический HTML, который мы получили,
00:10:17
содержит гораздо больше, включая
00:10:21
данные сервера, если бы я рисовал
00:10:23
здесь более традиционный вид, вы бы получили
00:10:24
весь этот вид, черт возьми если я
00:10:26
на самом деле перехожу на домашнюю страницу Ping, а JavaScript все еще
00:10:28
отключен, вы знаете, что, поскольку
00:10:29
есть видео, которое должно воспроизводиться,
00:10:31
а это не
00:10:32
так, это домашняя страница Ping с
00:10:34
отключенным JavaScript, и это работает,
00:10:36
потому что HTML, который отправляет сервер,
00:10:38
правильный этот правильный HTML означает, что ваши
00:10:40
метаданные верны, ваша первая отрисовка
00:10:43
правильна, ваш общий пользовательский опыт
00:10:46
более последователен, потому что у вас нет
00:10:48
большой кучи JavaScript, который нужно загружать,
00:10:51
запускать синтаксический анализ и рисовать, прежде чем контент доберется
00:10:55
до пользователя, который все сказал вам не
00:10:57
обязательно делать это на каждой странице в next.js,
00:10:59
вы можете согласиться или отказаться; на самом деле на этой
00:11:02
странице вы можете заметить, что она по-прежнему
00:11:04
загружается очень быстро,
00:11:05
потому что мы не хотим запускать это
00:11:07
на сервере, эта страница не t запускается на
00:11:09
сервере, когда мы создаем наше приложение,
00:11:11
когда нам нравится npm run build или мы развертываем его
00:11:14
в Versa, поскольку файл для этой страницы
00:11:16
не имеет функции получения реквизитов на стороне сервера,
00:11:19
следующий достаточно умен, чтобы
00:11:21
сгенерировать уникальную HTML-страницу для сайт
00:11:24
во время сборки, а затем этот маршрут теперь
00:11:26
имеет статический HTML, который извлекается, когда
00:11:29
пользователь загружает страницу. Статическая природа
00:11:31
выводимого контента означает,
00:11:34
что роботы и сканеры Google могут
00:11:37
легче анализировать его и получать
00:11:38
из него значимые данные, это означает, что пользователи загружают
00:11:40
страницу значительно быстрее, это означает, что для
00:11:45
загрузки вашей страницы в первую очередь необходимы мощные устройства, и это
00:11:47
наиболее важно здесь означает, что вам
00:11:49
не нужно запускать серверный код при каждом
00:11:50
запросе, потому что вы сгенерировали этот HTML
00:11:53
во время сборки и затем отправьте его на
00:11:55
свой CDN, чтобы поделиться им оттуда. Статические
00:11:57
ресурсы невероятно дешевы, и если
00:11:59
вы сможете распространять их и позволять
00:12:01
вашим пользователям получать их, это будет
00:12:03
значительно
00:12:05
лучше для всех,
00:12:07
я вижу, люди говорят, но кто на самом деле
00:12:09
отключает JavaScript,
00:12:11
роботы отключают JavaScript,
00:12:13
куча встроенных устройств отключают
00:12:15
JavaScript, куча подобных сканеров, SEO,
00:12:19
подобные вещи, стабильный JavaScript, что
00:12:21
наиболее важно,
00:12:22
у пользователей отключен JavaScript, пока
00:12:25
JavaScript не загрузится, но у каждого пользователя, который заходит на
00:12:27
ваш сайт, сначала отключен JavaScript.
00:12:29
много миллисекунд,
00:12:30
возможно, даже секунд, в зависимости от
00:12:32
скорости соединения на своем
00:12:33
устройстве. У каждого пользователя
00:12:35
отключен JavaScript на некоторое время на
00:12:37
каждом веб-сайте, на который он заходит, и сообщает, что
00:12:39
JavaScript загружается, и в идеале содержимое
00:12:42
этой страницы будет правильным с первого
00:12:44
раза. загружается без необходимости использования
00:12:46
JavaScript, все загружается за
00:12:47
кулисами, кто-то спрашивает, есть ли
00:12:49
сценарий, когда это нехорошо,
00:12:51
либо есть ситуации, когда это
00:12:52
нехорошо, есть места, где это не
00:12:54
обязательно, где вы можете сказать, а
00:12:56
Не беспокойтесь, мы просто получим все
00:12:57
на клиенте, мы сделаем это, при пинге у нас
00:13:00
есть несколько страниц, где, как и
00:13:01
панель мониторинга, например, серверная
00:13:04
визуализация панели не имеет смысла,
00:13:06
также нравится, что кнопки меню работают
00:13:07
с отключенным JavaScript, весело вещи, если у
00:13:09
вас есть страница, которую вы просто не
00:13:11
заботитесь о правильности HTML, как будто
00:13:12
люди используют ее исключительно на
00:13:14
компьютерах в Сан-Франциско с очень
00:13:16
быстрым подключением к Интернету, это не так уж
00:13:17
важно или что-то в этом роде, с которым мы имеем дело,
00:13:19
например несколько AV-устройств, с которыми
00:13:21
вы хотите взаимодействовать, поэтому, когда я перейду
00:13:24
на эту страницу, мне нужно будет использовать ваш AV. Мне
00:13:27
нужно использовать вашу камеру и
00:13:28
микрофон, чтобы активировать этот
00:13:30
вызов. Если у нас не работает JavaScript,
00:13:32
я не могу сделать что-либо из этого, эта страница
00:13:34
на самом деле бесполезна без JavaScript,
00:13:36
или просто почему перед этой страницей есть большой старый
00:13:39
счетчик загрузки, она
00:13:40
все еще рендерится на сервере, и она все еще помещает
00:13:42
кучу данных в этот рендеринг на сервере,
00:13:44
чтобы метаданные здесь были правильными
00:13:46
поэтому, когда я связываю этот звонок с кем-то,
00:13:48
когда я это делаю, появляется нужная информация, это
00:13:49
как если бы я зашел на один из моих любимых сайтов,
00:13:52
валидатор карт Twitter, кстати,
00:13:54
супер-совет, если вы работаете с
00:13:55
метаданными, один из самых простых способов чтобы узнать,
00:13:57
работает ли ваше [ __ ],
00:13:59
поэтому, когда я вставляю сюда ping-вызов, я не могу
00:14:02
отобразить предварительный просмотр карты, потому что я, должно быть,
00:14:04
недавно что-то сломал,
00:14:05
очень полезно знать теоретически, это
00:14:08
должно загрузиться, и это удивительно, что это
00:14:09
не
00:14:10
проверка метаданных URL-адреса, я думаю, Facebook
00:14:13
есть один валидатор ссылок Facebook,
00:14:17
обмен отладкой, круто,
00:14:19
пожалуйста, работайте,
00:14:21
круто,
00:14:22
этот вид работает, вот как это
00:14:23
будет выглядеть. У меня есть мой старый логотип T3.
00:14:25
Комната Тео, заходите в комнату Тео, вот
00:14:27
что содержат метаданные этой страницы,
00:14:29
если бы эта страница была клиент
00:14:31
отрисовал полностью, это не сможет
00:14:34
пройти, потому что для этого нужно будет
00:14:36
загрузить HTML, затем запустить некоторый
00:14:38
JavaScript, а затем создать обновленную страницу,
00:14:40
и этот робот не собирается этого делать,
00:14:42
он просто загрузит HTML
00:14:43
и прочитает его. Я собираюсь остановиться на
00:14:44
этом первом шаге. Я думаю, это то, чего
00:14:46
не хватает многим людям, когда они видят
00:14:48
подобные вещи.
00:14:49
Многие устройства
00:14:51
останавливаются здесь,
00:14:53
поэтому HTML-код здесь, но он
00:14:55
неверен,
00:14:57
если на вашем устройстве не работает JavaScript,
00:14:59
потому что он не работает. еще не загружен, потому что
00:15:01
вы сервер, и ваш сервер не
00:15:03
загружает JavaScript, потому что вы анализируете
00:15:04
вещи, потому что вы читаете метаданные,
00:15:06
если вы остановитесь здесь, и многие вещи сделают
00:15:09
это не работает, вы не получаете
00:15:12
данные что вам нужно здесь, если
00:15:13
говорить реалистично, потому что
00:15:16
важно учитывать
00:15:18
возможности серверного рендеринга, когда они у вас
00:15:20
есть, и HTML-содержимое, которое
00:15:22
ваши пользователи получают, когда вы можете, так что
00:15:24
да, будьте более внимательны к тому, как ваши
00:15:27
серверы на самом деле визуализируют то,
00:15:28
что происходит. где и в какой степени
00:15:33
формируется HTML-код, который выходит с вашего сервера, и как он выглядит,
00:15:35
здесь есть ошибки, да, одна из больших
00:15:37
ошибок заключается в том, что не весь код может быть запущен на
00:15:39
сервере, такие вещи, как прямой вызов окна,
00:15:41
на самом деле не весь код может
00:15:45
запускаться на сервере, там много кода, я
00:15:47
не хочу его уменьшать, есть
00:15:49
много кода, который нельзя запустить на
00:15:50
сервере, вещи, которые вызывают окно Window,
00:15:52
не могут быть запущены на сервере, потому что
00:15:53
серверы этого не делают. если на серверах Windows работает
00:15:55
Linux, то это серьезно, шутка, хотя на
00:15:57
серверах нет примитива окна,
00:15:59
поэтому вы не можете вызывать его напрямую и делать с
00:16:00
ним что-то, вам не нравится проверять
00:16:02
AV-устройства пользователей на сервере, потому что вы
00:16:04
не на их устройстве, где находятся AV-устройства,
00:16:06
вы не можете вызвать локальное хранилище, поэтому
00:16:10
вещи, которые вызывают локальное хранилище, локальное
00:16:13
хранилище не существует на сервере,
00:16:14
существует на клиенте, у вас нет
00:16:16
доступа к нему на сервере, если вам нужны такие
00:16:18
вещи, как что вы хотите поместить их
00:16:19
в запрос на сервер, чтобы сервер
00:16:21
мог включать нужные вещи. Опять же,
00:16:23
один из огромных аргументов в пользу использования
00:16:24
файлов cookie заключается в том, что файлы cookie будут в
00:16:26
первоначальном запросе, и вы можете отображать
00:16:27
правильные вещи соответственно другому коду, который
00:16:28
может не запускаю на серверах ничего
00:16:30
с сохранением состояния, если у вас есть полный код состояния, вам
00:16:33
нужно либо поместить его в базу данных
00:16:34
и синхронизировать его, либо вам не нравится
00:16:37
набор по щелчку, э-э, Укажите те типы
00:16:42
вещей, которые не будут запускаться на
00:16:43
сервере в основном все, чего нет
00:16:44
до начала выполнения эффектов использования
00:16:46
и до начала выполнения действий, не
00:16:48
будет присутствовать при рендеринге на
00:16:49
сервере, что еще есть, с чем я
00:16:51
столкнулся, когда мне хотелось чего-то,
00:16:53
и я мог Я не использую его, потому что я занимался
00:16:55
рендерингом на сервере. Я бы сказал, что пользовательское устройство является
00:16:57
частью окна, и единственный способ
00:16:59
получить доступ к пользовательским устройствам - это окно
00:17:00
и аналогичные глобальные переменные на основе окон.
00:17:10
обновления страниц в реальном времени, не лучше ли
00:17:12
для этого случая иметь рендеринг на стороне клиента, о
00:17:14
боже, я рад, что вы здесь для этого
00:17:15
потока и видео, потому что вся суть в том,
00:17:17
что SSR - это только первый
00:17:20
шаг, который next.js,
00:17:23
и я хочу очень четко прояснить
00:17:24
это, потому что я чувствую, что это то, чего
00:17:25
людям не хватает, и мне не терпится задать
00:17:26
вопрос, потому что я хочу вызвать его
00:17:27
следующим, только это, это следующее,
00:17:31
это обычный Spa, как только ваш HTML
00:17:36
прошел через пользователя, мне действительно следует
00:17:37
переместить это сюда, потому что это тот момент,
00:17:38
когда HTML правильный, поэтому этот
00:17:41
раздел здесь следующий, и эта часть
00:17:43
здесь
00:17:44
реагирует,
00:17:46
как только ваш серверный код запускается, вы находитесь в
00:17:48
обычное приложение реагирования, единственная разница
00:17:50
между чем-то вроде создания приложения T3 или
00:17:53
извините, я бы хотел создать приложение реагирования или
00:17:54
Veet, разница между ними и
00:17:56
разница с чем-то вроде следующего -
00:17:58
это то, что происходит до того, как появится этот HTML,
00:18:01
если бы я был в горизонтальном спектруме, это,
00:18:03
вероятно, похоже на самая полезная часть,
00:18:05
если бы мы были очень общими, например,
00:18:07
есть загрузка HTML, давайте сделаем три из
00:18:10
этих загрузок HTML. Загрузка JS и, э-э, JS
00:18:14
рисует правильный контент. Я даже буду называть
00:18:18
JS, синхронизированным с содержимым HTML, это
00:18:22
три шага, которые оба похожи на создание
00:18:24
Приложение React, Veet или другое одностраничное
00:18:26
приложение имеют, а также что-то вроде
00:18:28
next.js.
00:18:29
Разница между созданием приложения реагирования
00:18:32
и Beats по сравнению с чем-то вроде next заключается
00:18:35
исключительно в запросе на завершение
00:18:38
загрузки Spa, позвольте мне быстро перенести все это в
00:18:42
этот раздел, что черт возьми, почему он это
00:18:44
делает, я не нашел этого
00:18:46
ни в одном месте, почему он думает, что это здесь,
00:18:48
а не делает этого, так что этот раздел здесь,
00:18:50
немного в этой области, здесь все по
00:18:53
-другому, в следующей стране,
00:18:56
единственная разница между следующее и
00:18:58
еще одно одностраничное приложение прямо здесь.
00:19:00
Это следующий раздел ремиксов, когда
00:19:03
вы используете что-то, что рендерится
00:19:05
на сервере, и это что-то вроде
00:19:06
следующего ремикса или что-то еще, поэтому я не знаю,
00:19:08
почему эта Стрела продолжает убивать себя
00:19:09
всякий раз, когда это что-то вроде next или
00:19:12
remix, и он отображает выполняющийся код на
00:19:13
сервере, он запускается здесь
00:19:15
до загрузки HTML,
00:19:17
но с этого момента я должен
00:19:20
придавать этому цвету фона слишком неправильный
00:19:22
цвет.
00:19:25
Я также собираюсь переместить это вверх. Боже, почему
00:19:27
экскалатор делает это со мной, я хочу
00:19:30
отсоединить эту стрелку Я никогда не хочу этого, могу ли
00:19:33
я просто сказать стрелкам, чтобы они никогда не соединялись,
00:19:34
может быть, все в порядке, если моя стрелка больше никогда не
00:19:36
подключается, окей, это следующий
00:19:37
раздел ремиксов,
00:19:40
и это обычный Спа, так что, учитывая этот
00:19:45
спектр, у вас есть следующий ремикс
00:19:47
экшн и обычный спа, разница
00:19:49
здесь то, что делает этих двоих такими
00:19:51
разными, потому что сейчас они выглядят
00:19:52
очень похожими, вот такая
00:19:54
маленькая секция впереди, что
00:19:55
это значит, о Боже, я не могу просто сделать все
00:19:57
три из них короче один раз хорошо,
00:19:58
лучше, поэтому
00:20:00
здесь отличается то, что здесь загружается HTML-код.
00:20:02
Я поставлю здесь стрелку. Исходный исходный
00:20:05
HTML-код правильный в следующем ремиксе. Неверно,
00:20:09
а затем Spa, поэтому важное отличие
00:20:11
здесь, например, различие между исходным
00:20:13
HTML-кодом при использовании рядом с ремиксом
00:20:16
правильно и неправильно, если вы
00:20:18
используете традиционный спа-центр, что означает, что то, что
00:20:20
происходит дальше,
00:20:22
также отличается, если ваш HTML правильный, тогда,
00:20:24
когда JS загружается, он не заполняет
00:20:27
страницу, а воссоздает ее в
00:20:30
JavaScript. Land, чтобы синхронизировать
00:20:31
это состояние с состоянием страницы,
00:20:34
поэтому этот шаг немного отличается в
00:20:37
зависимости от того, собираетесь ли вы перейти к следующему
00:20:39
маршруту ремикса или нет, но различие,
00:20:41
которое действительно имеет значение для того момента, который я хочу
00:20:43
довести до дома, заключается в том, что единственное
00:20:45
Разница между next to remix и
00:20:48
чем-то вроде приложения Vita create React.
00:20:50
Единственная разница в том, как
00:20:52
ведет себя рендеринг при загрузке страниц,
00:20:53
заключается в том, что ваш HTML
00:20:57
изначально загружает другой контент. Этот первый
00:21:00
шаг
00:21:01
верен, если вы используете среду
00:21:04
рендеринга на стороне сервера, и это
00:21:06
неверно, если вы используете
00:21:08
платформу на основе одностраничного приложения, и это
00:21:10
нормально, если вещь, которую вы создаете,
00:21:11
не требует правильного HTML, но,
00:21:13
вероятно, в какой-то момент он нужен. Я видел, как
00:21:15
кто-то еще в чате говорил, что именно поэтому
00:21:17
одностраничное приложение загружается быстрее, нет, это
00:21:18
не так, потому что, если я запускаю этот код здесь
00:21:20
при сборке, то, что кэширует сервер,
00:21:22
будет таким же, если у меня есть HTML, который будет
00:21:25
построен следующим образом, и есть ли у вас HTML, который
00:21:27
создает реагирующее приложение, построенное, они загружаются так
00:21:29
же быстро, если я хочу чтобы создать разный HTML
00:21:32
для каждого запроса или каждого пользователя, я могу
00:21:34
это сделать, и это будет медленнее для
00:21:36
первой отрисовки, но в целом это не будет медленнее,
00:21:38
HTML, который пользователь получает из
00:21:41
одностраничного приложения, неверен, и это
00:21:43
всегда будет занимать больше им пора
00:21:45
загрузить JavaScript, получить дату,
00:21:47
необходимую JavaScript, а затем нарисовать
00:21:48
правильную страницу, но если страница
00:21:49
статична, я могу сделать это во время сборки здесь
00:21:52
и сейчас моя страница и ваша страница моя страница
00:21:56
будет следующим приложением и ваша страница, являющаяся
00:21:57
приложением создания реакции, имеет то же время, что и
00:21:59
первый HTML-код, разница в том, что ваш
00:22:02
HTML неверен, если я хочу, если у меня есть
00:22:04
динамические данные, которые мы хотим получить,
00:22:05
скажем, мы хотим получить количество просмотров на
00:22:07
этой странице, вы можете загрузить HTML-страница
00:22:08
без данных, вы можете загрузить
00:22:10
JavaScript, который анализирует JavaScript, и
00:22:12
отображает страницу, черт возьми, мне нужны
00:22:14
эти данные, если есть третья выборка, чтобы
00:22:16
получить эти данные, верните их, и теперь у вас
00:22:17
есть правильный контент в следующем
00:22:19
ремиксе, если вы решаете заблокировать страницу с
00:22:22
этим контентом, вы делаете один запрос,
00:22:24
сервер получает все, что ему нужно, помещает это
00:22:25
на страницу, а затем то, что клиент
00:22:27
возвращает, правильно с первого раза, и
00:22:29
это в целом занимает гораздо меньше времени, гораздо
00:22:31
меньше времени, и если вы это сделаете Мне не нужно
00:22:33
этого делать, потому что контент статический, тогда
00:22:34
не блокируйте каждый запрос на сервере.
00:22:36
Создайте статическую страницу из
00:22:38
ремикса Nextdoor. Очень легко эффективно
00:22:41
превратить ремикс в создание
00:22:44
приложения реагирования, а также никогда не использовать get server - боковые
00:22:46
реквизиты и никогда не использовать загрузчики в действиях,
00:22:49
серверный код запускается только в том случае, если вы
00:22:50
его напишете, поэтому не пишите его, если он вам не нужен,
00:22:52
и теперь вы только что создали
00:22:54
одностраничное приложение в стиле создания реагирования с
00:22:57
лучшими инструментами сборки или вы можете блокировать
00:23:00
что-то, потому что у вас есть страницы, которым нужен
00:23:02
контент, и это тоже нормально, но есть вероятность, что
00:23:05
в какой-то момент вам понадобится
00:23:07
правильный HTML, и в этот момент вам
00:23:09
захочется
00:23:12
с самого начала использовать дополнительный ремикс nexjs, и я нашел почти
00:23:14
каждый проект, над которым я когда-либо работал, в
00:23:16
конце концов я дошел до того, что
00:23:18
захотел добавить конечную точку или
00:23:19
заблокировать, например, создание этой страницы, или,
00:23:22
например, я хотел использовать инкрементную статическую
00:23:23
повторную проверку или регенерацию и
00:23:25
повторную проверку, что угодно, чтобы убедиться
00:23:27
содержание таких метаданных корректно
00:23:29
по запросу, все эти вещи быстро
00:23:32
замечаются, когда у вас возникают проблемы,
00:23:34
требующие их решения.
00:23:36
Я не знаю, как это выразить, кроме как «
00:23:38
лайк», если вы не думаете, что вам нужна какая-то
00:23:40
форма рендеринга или генерации на стороне сервера
00:23:42
вы пожалеете, что
00:23:44
вскоре вы, вероятно, близки к тому
00:23:46
моменту, когда вы поймете, что кто-то
00:23:48
спросил, есть ли у вас условные выражения во
00:23:49
внешнем интерфейсе I.E, например, если контент
00:23:52
запускается во время гидратации это зависит от того,
00:23:54
где находятся условные выражения, и от того, находится ли
00:23:55
дата действия этих условий
00:23:57
на сервере или нет, это похоже на то, как если бы вы
00:24:00
блокировали страницу при получении данных из
00:24:02
Prisma и отображали определенное
00:24:04
представление только в том случае, если эти данные имеют, скажем, что-то вроде вы
00:24:08
используете токен пользователя или его файл cookie для
00:24:10
получения профиля пользователя, и вы
00:24:12
отображаете эту страницу только в том случае, если он является администратором, если у
00:24:14
вас есть код, который, если пользователь является администратором,
00:24:16
отображает это, иначе отображает что-то еще,
00:24:18
тогда HTML, который получает пользователь, правильный, я
00:24:20
думаю Я рассказал здесь все, что хотел, и
00:24:21
главное, что я хочу донести до дома, это то, что
00:24:23
следующий JS - это не сумасшедшая
00:24:26
альтернативная структура, которая не делает
00:24:28
вещей, которые реагируют, не
00:24:33
меняет ли она каким-либо значимым образом вашу реакцию? код вообще запускается на
00:24:36
клиенте, единственное, что
00:24:39
делает next.js и единственное, что делает remix,
00:24:41
— это
00:24:42
запрос до того, как контент окажется на
00:24:45
устройстве пользователя. next.js упрощает,
00:24:48
чем когда-либо, генерацию HTML для каждой страницы для
00:24:52
ваших пользователей, чтобы при они загружают
00:24:54
страницу, HTML правильный, а затем
00:24:56
загружается JavaScript и становится обычным
00:24:58
реагирующим приложением без следующего или ремикса, вы
00:25:00
получаете неправильный HTML, клиент должен
00:25:02
получить все, обновить все это, и
00:25:04
только тогда пользователь получит правильный
00:25:06
контент и Преимущество этих
00:25:08
фреймворков на стороне сервера заключается в том,
00:25:10
что вы контролируете, какой HTML-код
00:25:13
получает пользователь, но не думайте, что использование
00:25:15
next.js означает, что вы не можете использовать все
00:25:17
остальные элементы реагирования, к которым вы привыкли.
00:25:19
по-прежнему одностраничное приложение, и все
00:25:20
люди, говорящие об одностраничном приложении по сравнению со
00:25:23
следующим,
00:25:24
на самом деле не понимают, что такое next.js,
00:25:26
потому что next JS не является
00:25:28
фреймворком многостраничного приложения, это
00:25:31
фреймворк одностраничного приложения, это
00:25:33
фреймворк, основанный на реагировании который работает на
00:25:36
сервере, который позволяет вам генерировать
00:25:38
разные HTML-коды на основе разных маршрутов,
00:25:42
но вы все равно создаете одностраничное
00:25:43
приложение, как только первая страница загружается,
00:25:47
это просто обычное приложение реагирования, вот и все,
00:25:49
как я
00:25:51
надеюсь, что это видео достаточно хорошо освещает нас,
00:25:53
что Я могу начать ссылаться на него и
00:25:55
больше не отвечать на эти надоедливые вопросы.
00:25:56
Дальше вы получаете преимущества
00:25:58
рендеринга на стороне сервера и
00:26:00
стиля одностраничных приложений.
00:26:09
HTML
00:26:11
корректен для этих интерактивных веб-сайтов,
00:26:13
как только он загружается, вот и все. Далее. js
00:26:15
не является альтернативой этим вещам.
00:26:17
Далее — альтернатива реакции. Далее —
00:26:19
альтернатива одностраничным приложениям.
00:26:22
Далее позволяет создать действительно мощное
00:26:24
одностраничное приложение с помощью правильный HTML с
00:26:26
сервера при первой отрисовке и гораздо
00:26:28
лучший общий опыт разработчика в
00:26:30
дальнейшем - это одностраничная
00:26:32
платформа приложений, которая, как оказалось,
00:26:34
готова к работе с серверной частью, работает на серверах
00:26:36
и позволяет вам делать
00:26:37
действительно классные вещи, но это не обязан
00:26:39
делать эти вещи, если вы этого не хотите,
00:26:40
потому что, в конце концов, это способ
00:26:42
создания реагирующих приложений, а затем не
00:26:45
мешает вам иметь
00:26:47
интерактивный настраиваемый опыт работы в реальном времени
00:26:49
в вашем приложении, потому что я
00:26:51
гарантирую, что пинг больше похоже на приложение,
00:26:53
чем большинство из вас, которые говорят, что вам не нужен
00:26:55
следующий пинг сборки jsr, настолько
00:26:58
интерактивный и живой, насколько вы можете получить, наше
00:27:01
среднее время сеанса страницы составляет два с
00:27:02
половиной часа два с половиной часа на одной
00:27:05
странице нас не особо волнует, как
00:27:07
быстро появится эта первая панель,
00:27:09
но наличие возможностей платформы, которая
00:27:10
позволяет нам создавать правильный HTML, создавать
00:27:12
правильный Json, вызывая серверную часть в нашей
00:27:14
собственной единой среде Focus, настолько
00:27:17
мощно, что мы используем следующий .js для создания
00:27:20
нашего одностраничного приложения, которое во
00:27:22
многом похоже на приложение. JS позволяет нам делать это
00:27:24
лучше, и это отличная среда для
00:27:26
этого. Если вы не думаете, что вам
00:27:28
сейчас нужен действительно хороший SEO, это не значит, что
00:27:30
вы этого не сделаете. нужны преимущества
00:27:33
платформы приложений, отображаемых на сервере, и
00:27:35
next.js по-прежнему является лучшим вариантом для
00:27:37
этого, несмотря на все вышесказанное, если вы все еще
00:27:39
почему-то не понимаете это, задайте несколько
00:27:40
вопросов в комментариях, возможно, зайдите
00:27:41
пообщаться в Discord, я хочу разобраться
00:27:43
что здесь не находит отклика, потому что
00:27:44
многие люди просят быть откровенными не
00:27:46
просто глупыми, а совершенно глупыми вопросами
00:27:48
о next.js и создании приложения реагирования,
00:27:51
и я хочу быть очень ясным, что
00:27:53
больше нет вариантов использования для создания приложения реагирования V
00:27:55
шаблоны для одностраничного приложения,
00:27:57
если вам действительно не нужен
00:27:58
серверный рендеринг, хороши, но, вообще
00:28:00
говоря, чаще всего отсутствие
00:28:03
серверного рендеринга облегчит вашу жизнь,
00:28:04
и вам, вероятно, следует рассмотреть возможность
00:28:06
интеграции его в ваши приложения. Надеюсь,
00:28:08
это было полезно, присоединяйтесь к Discord, если
00:28:09
вы не подписаны, если у вас нет по
00:28:11
какой-то причине этих кнопок здесь, я думаю,
00:28:13
там нажмите на нее или на эту
00:28:16
подписку, спасибо вам всем
00:28:18
большое спасибо, что заглянули,
00:28:21
посмотрите следующее видео

Описание:

NextJS is probably the best way to build your next React application. There are few better ways to do full stack with Javascript. Hopefully this video helps you better understand why! THANK YOU MIR FOR THE GRIND TO GET THIS OUT TODAY!!! ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://www.twitch.tv/theo ALL MY BEST MEMES ARE ON TWITTER FIRST https://twitter.com/t3dotgg ALL THE COOLEST PEOPLE ARE IN MY DISCORD https://discord.com/invite/xHdCpcPHRE ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (instagram, tiktok, blog): https://t3.gg/

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "How NextJS REALLY Works"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "How NextJS REALLY Works" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "How NextJS REALLY Works"?mobile menu icon

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

mobile menu iconКак скачать видео "How NextJS REALLY Works" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "How NextJS REALLY Works"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "How NextJS REALLY Works"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

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