Автор оригинала: FreeCodeCamp Community Member.
Мы все можем договориться об одном: React является одним из самых популярных решений для создания интерактивных веб-приложений, как небольших, так и крупных.
И он используется так много стартапов и компаний, которые это очень ценные навыки, чтобы иметь в эти дни.
Я обнаружил Next.js пару лет назад, и был заинтригован тем, что он пытался сделать.
В этом посте я опишу свое личное путешествие с Next.js. Я также обсудим, почему я верю, что это правильное время, чтобы добавить его в свой активный стек.
Ранняя полоса
Назад в середине 2000-х годов, когда в Интернете было молодым и расти, разработчики переместились от статических только HTML-страниц на более надежные и динамические решения.
Это дало нам возможность создавать страницы с динамическим контентом, используя Tech, как PHP (ум, JavaScript был очень молодым и нефильтом в это время).
Вы могли бы иметь один Профиль .php Страница и это позаботится об Алисе, Боб, Джоне, Мехуле и всем 15 000 зарегистрированных людях на вашем сайте – очень удобно.
Затем пришел avaScript age. Люди начали осознавать, что этот язык поддерживается для веб-сайта, который может быть использован так много.
Вы можете настроить динамическую отправку формы, фоновые запросы HTTP, приятные эффекты прокрутки и даже создают веб-страницы на лету.
Повышение JavaScript и библиотек, таких как jQuery позволило веб-разработчикам создавать хорошие интерфейсы полностью настраиваемыми с JavaScript.
Вскоре каждый веб-разработчик начал толкать все больше и больше JavaScript по сети клиенту. Конечно, технология развивалась, мобильные телефоны и ПК стало лучше с большим количеством оперативной памяти и ядра, но JavaScript начал развиваться быстрее.
Больше функциональных возможностей, дополнительных функций и дополнительных рамках означали лучший пользовательский опыт и возможность создавать приложение ощущение в Интернете.
Но это также означало толкать все больше и больше JavaScript вниз по сети на устройствах, которые не могут отключить лимиты JavaScript.
Веб был сделан для HTML
Старые, медленные мобильные устройства начали сдаваться – время загрузки стало высоким, было больше задержки, двигатели JS были менее мощными, и был просто так много JavaScript для анализа!
С фреймами, такими как React и Angular, вы в основном выталкиваете огромные пакеты JavaScript к клиентам, которые сначала должны загружать небольшие HTML-страницы.
Веб-разработчики, которые переехали из AGE PHP (HTML-HTML) для javaScript (Clientfered HTML), вскоре начали осознавать, что они облажались большим временем.
Реагирование было прекрасно для интерактивности и высокопроизводительных компонентов, но тот факт, что люди начинают использовать эти инструменты для построения все начал создавать проблемы для клиентов.
Простой О нас Страница, которая может быть очень простой статической страницей HTML/CSS, теперь была страницей с колонком JS. В первую очередь браузер должен был загрузить, затем проанализировать, затем выполнять, а затем изменить DOM для отображения содержимого.
Это было плохо для всех. У клиентов были более высокие времена нагрузки. Браузеры пришлось упорно работать для запуска JS (проанализируют браузеры и запускают HTML/CSS очень эффективно). И поисковые системы, такие как Google, и Bing, было трудно понять, о чем ваша страница была, потому что ваш исходный код никогда не содержит реальный контент. Он всегда был встроен где-нибудь в вашем пакете JS.
Люди любили реагировать и аналогичные инструменты. Но они также поняли последствия бегущих слишком много js клиентской стороне.
С другой стороны, они любили, как PHP работал, но им не понравилась его архитектура. Так каково было решение?
Серверный рендеринг (SSR) – лучший из обоих миров
Когда разработчики поняли, что толкая слишком много реагированного кода на клиенте было проблемой, они думали: эй, возможно ли в реакции в реакции, но отправляйте HTML-документы для клиентов?
В конце концов, когда код React выполняется выполнение, все, что у вас действительно есть HTML-документ в любом случае.
Так они сделали это. Рендеринг сервера (SSR) для реагирования родился.
Теперь, с SSR, вы можете написать код React, как-то запустить его на сервере (который был более мощным, чем ваше типичное клиентское устройство – как мобильный телефон), а затем отправьте документ HTML на клиента.
Win-Win для всех. Вы, как разработчик, доберитесь до кода в реакции – технология, которую вы любите. И посетитель на вашем сайте получает простой HTML-документ (с видимым контентом и небольшим регистрируемым JS), который получает масштабное повышение производительности. Плюс, Google любит тебя сейчас.
Кто бы этого не хотел?
Но это было слишком сложно
Серверный рендеринг определенно казался решением этой проблемы. Но проблема? Было слишком сложно установить правильно.
Правильная кэширование и кеш-разряжение? Не могли бы вы создавать статические HTML-файлы для страниц, которые не изменились? Как вы должны создать беспроблемный опыт навигации на вашем сайте, даже если у вас есть серверная сторона, представленная HTML? Как вы должны выслать нагрузку на свои серверы или генерировать контент по требованию?
И на вершине всего этого, как вы настраиваете всю эту архитектуру? Конечно, отреагируйте и в Интернете предоставляют все API для них, но они довольно многословны и обычно одноразмерные настройки.
Если вы тот, кто на самом деле строит что-то ценное, через некоторое время вы хотели бы потратить большую часть вашего времени на Бизнес логика вашего приложения, а не на базовой логике.
Представляем Next.js.
Next.js – это рамка, рожденная на небесах. Он отправляется с:
- Лучшие методы SEO
- Кэширование и автоматическая статическая оптимизация встроенной
- Полностью серверные страницы
- 100% поддержка реагирования
- Поддержка функций лямбда (маршруты API)
- Прекрасный твик Ваш веб-папак/Babel Config при необходимости
- И многое другое!
Он тезирует все эти характеристики производительности и разработки, которые вам нужны с типичным приложением RACT и позволяет сосредоточиться только на том, что имеет значение – ваш бизнес-код.
У меня был первый опыт работы с Next.js 2 года назад, когда он был очень молод.
Но Next.js 9.5 был выпущен в этом году со многими функциями. И я думаю, что это безопасно, чтобы сказать, что это один из самых мощных инструментов, доступных в экосистеме веб-разработки, особенно если вы разработчик реагирования.
Я управляю CodeDamn (платформа для разработчиков, чтобы научиться кодировать) сам на Next.js. Есть огромное повышение производительности к сайту по сравнению с вашим регулярным приложением RACT.
Если вы разработчик реагирования в 2020 году, одним из лучших навыков, которые вы можете узнать, является Next.js. Вот некоторые преимущества, которые он предлагает вам разработчику:
- Определенно развивающаяся технология – больше возможностей и возможностей работы
- Сервер, представленные страницы означает лучшую производительность – больше клиентов для вас
- SEO для ваших сайтов, запеченных – поисковые системы любят вас
- Все преимущества наличия сервера на местах – маршруты API, динамическое привлечение контента, и функция stale-revalidate (о, я люблю этот)
- Отличный технический навык на вашем резюме
Некоторые функции next.js я взволнован
Next.js развивается очень быстро. Они устаревают старые функции и все время вводят блестящие новые вещи.
На сегодняшний день я очень заинтересован в рамках в целом, но вот некоторые из моих лучших выборов:
# 1 Стабильная инкрементная статическая регенерация
Проще говоря, эта функция позволяет создавать статический контент динамично. Чего ждать? Давайте посмотрим быстрый пример:
Скажем, у вас есть веб-сайт блога (например, этот) с большим количеством статей. Когда кто-то посещает /Новости/[ссылка] (Где [ссылка] – это что-нибудь), вы хотите служить им статической страницей как можно быстрее.
Но возможно, что вы не хотите создавать Все Статические страницы в построении времени, потому что это заберет вам много времени. В некоторых случаях это не возможно вообще в сборке.
Кроме того, иногда ваш контент может Изменение, как быстрое редактирование блога – так что вы на самом деле не хотите полностью статичной страницы. Так каково решение?
Используя Next.js 9.5+, теперь вы можете генерировать статические страницы динамически на динамический путь и обновить их.
Это означает, что однажды следующие выберете этот конкретный URL-адрес, он сохранит его как статическую страницу и служить его статически, когда кто-то посещает путь. В то же время он будет открыт для динамического принятия новых дорожек.
Не только вы можете сделать это, с параметром Revalidate вы также можете указать, что Next.js должен обновлять ваши статические страницы один раз каждые x секунды на заднем плане, если есть какие-либо изменения!
# 2 WebPack 5 Поддержка
Next.js идет к поддержке WebPack 5. Это захватывающее, поскольку WebPack 5 приносит некоторые сладкие характеристики и оптимизации пучка и падает поддержки устаревших вещей в WebPack 4, что делает ядро светлее Отказ
Это означает, что ваши приложения Next.js будут быстрее, чем когда-либо и более надежный.
# 3 падение получателей GetInitialProps
Я лично не понравился концепцию выполнения одной функции в обеих средах – GetInitialProops.
К счастью, Next.js выяснил, что есть гораздо лучшее решение, и они привели в GetserversideProops и GetStaticProops как два великих метода с хорошими именами.
getserversideprops , Как указано имя, позволяет вводить реквизиты в вашей странице Next.js с самого сервера. И GetStaticProps Позволяет Next.js все еще создает статические выходы по времени сборки.
GetStaticProps В сочетании с инкрементным статическим регенерацией является признательностью убийцы на мой взгляд. Вы получаете много преимуществ динамической бэкинги, не имея динамической бэкинги.
# 4 Настойчивое кэширование для пакетов страниц
Next.js теперь также поддерживает настойчивые кэши для страниц, которые не изменились. Раньше, когда вы отправили новое приложение Next.js, Next.js выкинут все приложение, и пользователь должен был снова загрузить все CSS/JS, даже если эти пакеты были без изменений.
В последней версии Next.js выпущена на прошлой неделе, наши друзья в Vercel представили постоянную кэширование, которое снова является абсолютно отличным, чтобы иметь спектакль.
# 5 из коробки поддержки для модулей SASS и Teadercript
Если есть одна вещь, которую я люблю больше, чем JavaScript, это Typearcript. И сасс тоже сладко. Большинство людей, которых я знаю, используйте SASS, чтобы включить свои CSS, и он обеспечивает отличный опыт разработчика.
Next.js давно предложил отличную поддержку для Tearkcript из коробки. Но недавно они добавили Модуль на основе поддержки для SASS.
Это означает, что ваши стили теперь могут быть написаны в SASS, местный к вашим модулям, с кэшированием и повторной проверкой – все управляется Next.js внутри.
Похоже, они действительно хотят, чтобы вы разработали лучшие продукты, ориентируясь только на бизнес-логике.
Обучение Next.js [курс]
Я создаю эксклюзивный видео курс на Next.js с лучшими практиками, последние обновления рамок и супер классные вещи, которые вы можете сделать с этим. Я в том числе кучу полных проектов с рамками, чтобы вы получите глубокое понимание того, как работать с этим инструментом.
Если вы заинтересованы, подпишитесь на ранний доступ, используя этот Google Form Link И я буду обязательно добраться до вас, когда это выходит.
Заключение
Я собираюсь все в Next.js. Скорость, с которой они итерация и развитие концепции SSR и делает ее доступной для многих, просто удивительна.
Если вы зарегистрировались с помощью ссылки на форму выше, ожидайте услышать от меня скоро потрясающе для вас.
Не стесняйтесь ударить меня в социальные сети, чтобы поделиться тем, что вы думаете: Twitter и Instagram Отказ