Smashing Podcast Episode 23 С Гильермо Раухом: Что такое Next.js?

Сегодня мы говорим о Next.js. Что это такое и как оно может вписаться в наш рабочий процесс веб-разработки? Я поговорил с соавтором Гильермо Раухом, чтобы выяснить это.

Показать примечания

• Гильермо Раух в Твиттере
• Next.js

Еженедельное обновление

• «Освоение реквизитов и типов реквизитов в React»
  Дэвид Аденай
• «Вдохновленные дизайнерские решения с Брэдбери Томпсоном: искусство графического дизайна»
  Энди Кларк
• «Настройка API с использованием Flask, Google Cloud SQL и App Engine»
  Воле Оеканми
• «Формы и проверка в Ionic React»
  Джерри Нави
• «Как помочь вашим клиентам получить больше обратных ссылок с помощью дизайна»
  Сюзанна Скакка

Стенограмма

Дрю Маклеллан: он основатель и генеральный директор Vercel, облачной платформы для статических сайтов, которая подходит для рабочего процесса Jamstack. Он также является соавтором Next.js. Ранее он основал LearnBoost и CloudUp и известен как создатель нескольких популярных библиотек с открытым исходным кодом, таких как Socket.io, Mongoose и SlackIn. До этого он был основным разработчиком MooTools, поэтому мы знаем, что он знает JavaScript как свои пять пальцев. Знаете ли вы, что однажды он получил королевский заказ от короля Испании на создание ледяной скульптуры из салата айсберг? Мои потрясающие друзья, пожалуйста, поприветствуйте Гильермо Рауха. Привет, Гильермо, как дела?

Гильермо Раух: Я чертовски хорош, спасибо, что пригласил меня.

Дрю: Я хотел поговорить с вами сегодня обо всем мире Next.js, поскольку это то, о чем вы, очевидно, лично хорошо осведомлены, будучи соавтором с самого начала. Next.js — одно из тех названий проектов, которые были на моем радаре во время работы в пространстве Jamstack, но это не то, на что я лично смотрел или с чем слишком внимательно работал раньше. Для таких же людей, как я, которые, возможно, не знают, что такое Next.js, возможно, вы могли бы рассказать нам немного о том, что это такое и какие проблемы он пытается решить.

Гильермо: Next.js — очень интересный член вселенной Jamstack, потому что Next.js фактически стал полностью ориентированным на SSR фреймворком. Он начал получать широкое распространение за пределами пространства Jamstack, где люди создавали очень большие вещи, особенно когда им нужен был пользовательский контент, динамический контент, социальные сети или электронная коммерция, и они знали, что им нужен SSR, потому что их набор данных был очень большой или очень динамичный. Я думаю, для многих людей в мире Jamstack это осталось незамеченным, но позже Next.js получил возможности статической оптимизации.

Гильермо: С одной стороны, например, если бы вы не выполняли выборку данных на верхнем уровне вашей страницы с помощью Next.js, ваша страница React была бы… Кстати, для тех, кто не совсем в курсе, Next.js — это просто среда React для производства, но она имеет возможность выполнять некоторый рендеринг. Затем, когда вы получаете возможности статической оптимизации, если вы не определяете выборку данных на верхнем уровне вашей страницы, они автоматически экспортируются в виде HTML вместо того, чтобы пытаться что-либо сделать с серверным рендерингом.

Гильермо: Позже он также получил возможность создавать статические сайты, что означает, что вы можете определить специальный обработчик данных, но этот обработчик данных получает данные во время сборки. Next.js стал гибридным, очень мощным динамическим и статическим фреймворком, и теперь он также сильно растет в пространстве Jamstack.

Дрю: Люди могут сказать, что React уже является фреймворком, вы наверняка слышали, как его описывают именно так. Что на самом деле означает быть фреймворком для React?

Гильермо: Это отличное наблюдение, потому что я всегда обращаю внимание людей на то, что React в Facebook и React вне Facebook — совершенно разные звери. React в Facebook на самом деле используется вместе с серверным рендерингом, но даже их серверный рендеринг, например, не использует Node.js, он использует узкоспециализированную виртуальную машину под названием Hermes, которая связывается с их видом производственного взлома и стека PHP и отвечает. все эти передовые и экзотические потребности Facebook.

Гильермо: Когда они открывают исходный код React, это почти как открытый исходный код компонента. Я всегда называю это открытым исходным кодом двигателя, но не предоставлением вам автомобиля. Что произошло, так это то, что люди действительно хотели ездить с ним, они хотели попасть в места с React. В сообществе люди начали создавать автомобили, и они встраивали React в качестве движка, чего в первую очередь добивался водитель, разработчик, сделать React основной частью автомобиля. Начали появляться такие вещи, как Next.js, Gatsby, React Static и многие другие фреймворки, которые удовлетворяли потребность типа «Я действительно хочу создавать полностью загруженные страницы и приложения».

Гильермо: В то время как React был больше похож на компонент и движок для определенных виджетов на странице, это, безусловно, имело место для Facebook. Они широко и публично признают, что изобрели его для таких вещей, как пакет уведомлений, виджет чата, компонент новостной ленты, и эти компоненты были маршрутами React, которые были встроены в содержимое существующего производственного приложения с большим количеством строк кода. и даже другие JS-библиотеки и фреймворки.

Гильермо: Что значит создать фреймворк для React? Это означает, что вы делаете React фундаментальной частью истории, надеюсь, и это то, что мы попытаемся сделать с Next.js. Кривая обучения в основном связана с React с некоторыми дополнениями. поверхность для Next.js, особенно в отношении выборки и маршрутизации данных. Мы также много оптимизируем производство, поэтому, когда вы получаете React, когда вы получаете приложение Create React, что-то вроде того, что я называю «автомобилем с начальной загрузкой», который дает вам Facebook, возможно, потребности в производстве на самом деле не удовлетворяются. . Или если вы попытаетесь сделать это самостоятельно, настроив Webpack и настроив Babel и настроив серверный рендеринг и статическую генерацию, тоже сложно собрать машину с нуля. Next.js предоставит вам эту нулевую конфигурацию, а также оптимизированный для производства набор значений по умолчанию для создания больших вещей с помощью React.

Дрю: Получается, что вокруг вашего приложения React почти создается своего рода экосистема с набором предварительно настроенных инструментов, позволяющих вам:

Гильермо: Верно.

Дрю: Беритесь за дело и выполняйте генерацию статических сайтов, рендеринг или маршрутизацию на сервере.

Гильермо: Верно, и вы использовали слово, которое очень, очень ключевое для всего этого, что заранее настроено. Нам посчастливилось привлечь внимание Google Chrome как участника Next.js. Один из лидеров этого проекта, она считает, что когда они работали над фреймворками внутри Google, они столкнулись со многими теми же проблемами, с которыми сегодня сталкивается сообщество и открытый исходный код. В Google было много различных конкурирующих инициатив по масштабированию и созданию действительно эффективных веб-приложений из коробки.

Гильермо: Вы присоединялись бы как сотрудник Google, и вам бы дали фреймворк, с помощью которого вы могли бы создавать действительно большие, готовые к производству, очень производительные приложения. Шуби участвовала во многих этих инициативах, и она обнаружила, что есть два ключевых ингредиента, позволяющих сделать фреймворк успешным в масштабе. Один из них — предварительная конфигурация, означающая, что вы приходите на работу, собираетесь запустить совершенно новое приложение, вам должно быть предоставлено что-то, что уже готово к работе и отвечает многим производственным требованиям, которые известны на данный момент. во время.

Гильермо: С другой стороны, другой действительно важный шаг, над которым мы работаем, — это соответствие. Вам может быть предоставлен наиболее оптимизированный готовый к производству предварительно сконфигурированный фреймворк, но если вы пойдете дальше и, например, начнете вводить множество тяжелых зависимостей или сторонних скриптов или использовать очень неэффективные макеты, которые требуют много времени для рисования и т. д. и т. д., то вы собираетесь сделать эту предварительную настройку бесполезной. Совмещая предварительную настройку с согласованием с течением времени, разработчик не только получает отличную отправную точку, но и со временем ведет к успеху.

Дрю: Похоже, что особенностью Next.js является то, что он довольно самоуверенный, слой пользовательского интерфейса — это React, он использует сценарий типов, использует Webpack, и это все выборы, которые сделал проект, и это то, что вы получаете. Поправьте меня, если я ошибаюсь, но вы не можете поменять React на Vue, например, в Next.js.

Гильермо: Это хороший момент, когда принятие технических решений встречается с искусством. С одной стороны, я действительно хотел бы заявить, что Next очень беспристрастен, и причина этого в том, что если вы специально зайдете на github.com/vercel/nextjs и в каталог примеров, вы увидите, что там почти как комбинаторный взрыв технологий, которые вы можете использовать вместе с Next.js. Вы увидите fire-based, вы увидите Graphic UL, вы увидите Apollo, вы увидите Redux, вы увидите MobX, в пространстве CSS есть еще больше вариантов.

Гильермо: У нас есть встроенный порт CSS по умолчанию, но затем вы можете использовать две его разновидности: одну с импортом, другую с тегами стиля, которые мы называем Style JSX, что очень похоже на подход веб-платформы к Shadow CSS. Причина, по которой я имею в виду непредвзятость, заключается в том, что мы хотим, чтобы Next.js оставался очень близким к «голому железу» Интернета и не вводил множество примитивов, с которыми веб через 10 лет был бы несовместим. Затем, если вы посмотрите на примеры, вы увидите, что есть все эти другие технологии, которые вы можете подключить.

Гильермо: Базовый уровень мнений состоит в том, что есть React, и вы не сможете заменить его, по крайней мере, в ближайшее время. Кроме того, есть концепция, что вы должны иметь возможность создавать страницы, и это было чем-то новым, когда мы впервые запустили его, когда все пытались создавать одностраничные приложения. Мы поняли, что Интернет состоит из веб-сайтов с множеством страниц, которые создают различные точки входа через поисковые системы, Twitter, Facebook, социальные сети, электронную почту, как будто вы всегда ведете человека к точке входа, и тот человек, который проходит через эту точку входа, не должен загружать бремя всего приложения.

Гильермо: Затем этот путь привел нас к реализации серверного рендеринга, затем к статической генерации для нескольких страниц и так далее, и тому подобное. Этот другой базовый уровень мнений Next должен быть фреймворком, который работает для Интернета, а не против Интернета. Кроме того, в React отсутствовали примитивы выборки данных и маршрутизации, и мы их добавили. Существует определенный уровень мнений, с которым приходится сталкиваться, например, всем нужен маршрутизатор, поэтому он может быть встроен по умолчанию.

Дрю: Большое преимущество наличия этих настроек по умолчанию в том, что они избавляют от сложности выбора, они просто есть, они настроены, и вы можете просто начать использовать их, не задумываясь слишком долго, потому что я думаю, что мы все -

Гильермо: Точно.

Дрю: Бывал в ситуациях, когда выбор компонентов для использования слишком велик, и это может быть ошеломляющим и мешать продуктивности.

Гильермо: Точно.

Дрю: В каких проектах вы видите людей, использующих Next.js? Подходит ли он практически для любой ситуации, когда вы можете создать производственное приложение React, или он больше подходит для определенных типов сайтов с большим объемом контента? Имеет ли это значение в этом смысле?

Гильермо: Да, так что это был вековой спор о сети, является ли сеть для приложений, является ли сеть для сайтов, является ли она гибридом? Какова роль JavaScript, и так далее, и тому подобное? Трудно дать прямой ответ, но я считаю, что сеть всегда развивалась, чтобы быть гибридом контента, который развивается, чтобы быть все более и более динамичным и личным для пользователя. Даже когда вы говорите, как веб-сайт с контентом, веб-сайты с высококачественным контентом в мире имеют кодовые базы, которые очень похожи на приложения.

Гильермо: Отличным примером здесь является New York Times, они предоставят вам встроенные виджеты с инструментами анализа данных и интерактивной анимацией, и они порекомендуют, какую статью прочитать следующей, и у них есть встроенная модель подписки, которая иногда дает вам часть контента и иногда подсчитывает, сколько статей вы прочитали. Например, если бы я сказал вам это, когда была изобретена сеть, как сказал бы Тим Бернерс-Ли: «Нет, это безумие, это невозможно в сети», но это сеть, которая у нас есть сегодня.

Гильермо: Next.js отвечает многим из этих сложных современных потребностей, а это означает, что вы увидите много использования электронной коммерции, вы увидите много контента с этим. Между прочим, электронная коммерция означает не только покупку товаров, но и опыт, такой как крупнейшие веб-сайты по недвижимости в Интернете, realtor.com, zillow.com, trulio.com, вся эта категория — это Next.js, а затем контент. места. Мы только что подключили Washingtonpost.com в качестве клиента Vercel и Next.js. Затем у нас есть третья категория, которая является более новой, но очень интересной, а именно полные приложения и пользовательский контент, такой как tiktok.com, и что-то вроде вас. можно было бы подумать, что исходный вариант использования одностраничного приложения также достаточно представлен там.

Гильермо: Next.js как бы сияет, когда вам нужно иметь много контента, который нужно обслуживать очень, очень быстро, должен быть SEO-оптимизирован, и, в конце концов, это смесь динамического и статического.

Дрю: Ранее я говорил с Марси Саттон о Гэтсби, который, кажется, находится в похожем пространстве. Всегда приятно видеть более одного решения проблемы и иметь возможность выбирать между одним проектом и другим. Могли бы вы сказать, что Next.js и Gatsby работают в одном и том же проблемном пространстве, и насколько они похожи или различаются?

Гильермо: Я думаю, что некоторые варианты использования частично совпадают. Например, мой личный блог rauchg.com работает на Next.js, он тоже мог бы стать отличным блогом о Гэтсби. Есть такое перекрытие в небольшом пространстве статического веб-сайта, и под малым я не подразумеваю неактуальное. Многие доткомы, которые очень, очень важны, работают в основном в статической сети, так что, на мой взгляд, в этом прелесть Jamstack. Поскольку Next.js может статически оптимизировать ваши страницы, а затем вы можете получить отличные оценки Lighthouse, вы можете использовать его для перекрывающихся вариантов использования.

Гильермо: Я думаю, что черта прочерчивается, когда вы начинаете углубляться в более динамичные потребности и у вас много страниц, и вам нужно обновлять их одновременно. Хотя Gatsby создает решения для них, у Next.js уже есть готовые к эксплуатации решения, которые работают с любым типом базы данных, любым типом базы данных для «генерации» или «печати» большого количества страниц. Вот где сегодня клиенты обращаются к Next.js вместо Gatsby.

Дрю: Одна из проблем, с которой, кажется, сталкиваются все, когда их решение на основе JavaScript становится больше, — это производительность и то, как все может начать работать довольно медленно, у вас большие размеры пакетов. Традиционно такие вещи, как разделение кода, могут быть довольно сложными для правильной настройки. Я вижу, что одна из особенностей Next.js, которая бросилась мне в глаза, состоит в том, что он утверждает, что разделение кода происходит автоматически. Что делает Next.js с точки зрения разделения кода, чтобы это работало?

Гильермо: Ваше наблюдение верно на 100%. Одной из самых больших вещей в Интернете и одним из самых больших весов в Интернете является JavaScript, и так же, как разные материалы имеют разную плотность и вес независимо от фактического физического объема, JavaScript имеет тенденцию быть очень плотным и тяжелым элементом. Даже небольшое количество JavaScript по сравнению, например, с изображениями, которые могут обрабатываться асинхронно и вне основного потока, JavaScript имеет тенденцию быть особенно надоедливым.

Гильермо: Компания Next.js приложила огромные усилия для автоматической оптимизации ваших пакетов. Первое, что было моей первой интуицией, когда я впервые придумал идею для Next.js, было то, что вы собираетесь определить, например, 10 маршрутов. В мире Next.js вы создаете каталог страниц и помещаете туда свои файлы Index.js, About.js, Settings.js, Dashboard.js, termsofservice.js, Signup.js, Login.js. Они становятся точками входа в ваше приложение, которыми вы можете поделиться через все виды носителей.

Гильермо: Когда вы вводите их, мы хотим предоставить вам JS, который в первую очередь подходит для этой страницы, а затем, возможно, общий пакет, чтобы последующая навигация в системе была очень быстрой. Next.js также, что очень и очень приятно, автоматически предварительно выбирает остальные страницы, которые подключены к этой точке входа, так что это похоже на одностраничное приложение. Многие люди говорят: «Почему бы просто не использовать приложение Create React, если я знаю, что у меня может быть пара маршрутов?» Я всегда говорю им: «Смотрите, вы можете найти их в виде страниц, а поскольку Next.js будет автоматически предварительно извлекать те, которые подключены, вы в конечном итоге получите одностраничное приложение, но оно лучше оптимизировано с точки зрения первоначальной раскраски. , эта начальная точка входа».

Гильермо: Это был первоначальный подход к разделению кода, но со временем он стал намного сложнее. Google внесла очень хорошую оптимизацию под названием «Модуль и отсутствие модуля», которая даст дифференциальный JS для современных браузеров и устаревший JS, перегруженный полиполями, для других браузеров, и эта оптимизация на 100% автоматизирована и дает огромную экономию. Мы подарили его одному из наших клиентов, которого мы размещаем на Vercel, по имени Parnaby's, я думаю, если я не ошибаюсь, это было что-то очень, очень важное. Возможно, это было около 30% экономии размера кода, и это было только потому, что они обновили Next.js до версии, которая лучше оптимизировала пакеты JS.

Гильермо: Это был тот момент, который мы обсуждали ранее, а именно: вы выбираете Next.js, и со временем он становится только лучше и оптимальнее, он продолжит оптимизировать вещи от вашего имени. Это, опять же, предварительные настройки, с которыми вам никогда не придется иметь дело или с которыми вам не придется беспокоиться, и исследование которых вы даже не хотите делать, если честно. Как будто я не был особо вовлечен в это, но я смотрю на некоторые внутренние обсуждения, и они обсуждали все эти полиполя, которые имеют значение только для Internet Explorer X и Soho, я такой: «Я даже не хочу знать , давайте просто обновим Next.js и получим все эти преимущества».

Дрю: Иногда есть большие преимущества в том, чтобы придерживаться значений по умолчанию и придерживаться наиболее распространенной конфигурации вещей, что, похоже, действительно является подходом Next.js. Я помню, когда я начал писать PHP в начале 2000-х, и все использовали PHP и MySQL, и в то время, когда я только что вышел из Windows, я хотел использовать PHP и Microsoft Sequel Server. Вы можете это сделать, но вы плывете против течения на протяжении всего пути. Затем, как только я перешел на MySQL, вся экосистема просто начала работать на меня, и мне не нужно было об этом думать.

Гильермо: Да, все просто щелкает, это такое замечательное наблюдение. Мы постоянно видим это, например, экосистема Babel сейчас настолько мощна, что вы могли бы стать, например, немного быстрее, заменив Babel на что-то другое, но тогда вы жертвуете этой невероятной совместимостью с экосистемой. Это то, что вы уже упоминали о производительности, и, как и для многих людей, производительность сборки и производительность генерации статики является большим узким местом, и это то, что мы очень усердно улучшаем производительность наших инструментов постепенно.

Гильермо: Например, Next.js сейчас занимается обновлением своего стандартного Webpack 4 до Webpack 5, в котором есть некоторые несоответствия, и именно поэтому мы сначала предлагаем его людям в качестве опции. в флаге, но позже он станет значением по умолчанию. Webpack 5 обеспечивает невероятные улучшения производительности, но мы не жертвуем экосистемой Webpack, мы постепенно улучшаем ее. Конечно, были некоторые очень маленькие вещи, которыми нужно было пожертвовать, но сегодня это невероятное преимущество экосистемы JS, которое многие люди умалчивают, я думаю, потому что, может быть, они видят: «О, мы могли бы сделать X в Сохо, может быть, это было немного быстрее, или, может быть, MPM в Сохо заняло бы меньше времени». Они улавливают некоторые детали и упускают из виду общую картину, а именно ценность экосистемы огромна.

Дрю: Невероятная ценность того, чтобы вся конфигурация и обслуживание, а также эта его часть выполнялись проектом, подобным Next.js, вместо того, чтобы брать это на себя, переключаясь на использование чего-то другого, потому что как только вы отходите от этих значений по умолчанию. , вы берете на себя бремя обеспечения совместимости и делаете это самостоятельно. Одна из вещей, которые меня действительно заинтересовали в Next.js, это то, что есть варианты, доступные либо для создания статического сайта, либо для рендеринга на стороне сервера, либо, возможно, для их гибрида. Я думаю, что в недавнем обновлении были внесены некоторые изменения в это, можете ли вы немного рассказать нам об этом и когда вы можете выбрать тот или иной вариант?

Гильермо: Да, конечно. Один из ключевых компонентов этого гибридного подхода в сочетании с системой страниц, которую я описал ранее, заключается в том, что у вас могут быть полностью статические страницы или страницы, отображаемые сервером. Полностью статическая страница обладает невероятным преимуществом того, что я называю статическим подъемом, то есть вы можете взять этот ресурс и автоматически поместить его на край. Поместив его на периферию, я имею в виду, что вы можете кэшировать его, вы можете предварительно кэшировать его, вы можете реплицировать его, вы можете сделать так, чтобы при поступлении запроса он никогда не касался сервера, потому что мы знаем заранее», Эй, Slash Index — это статика».

Гильермо: Это очень, очень интересное преимущество, когда дело доходит до обслуживания глобальной аудитории. По сути, вы получаете автоматический CDN из коробки, особенно при развертывании современных пограничных сетей, таких как Vercel, AWS Amplify или Netlify и т. д. Next.js исходит из того, что если его можно сделать статичным, то он должен быть статичным. Когда вы только начинаете проект и работаете над своей первой страницей или пинаете шины фреймворка, с тем же успехом можно сделать все статичным.

Гильермо: Даже для высоких требований, например, vercel.com, наше собственное использование Next.js полностью статично. Это комбинация полностью статического и статического создания сайта, поэтому все наши маркетинговые страницы являются статическими, наш блог статически генерируется из источника динамических данных, а затем наша панель инструментов, которая содержит много динамических данных, но мы можем предоставить их в виде оболочек или скелетов. , все страницы, связанные с просмотром ваших развертываний, просмотром ваших проектов, просмотром ваших журналов и т. д., и т. д. — все это в основном статические страницы с клиентским JavaScript.

Гильермо: Это служит нам невероятно хорошо, потому что все, где нам нужна очень быстрая производительность первой панели, уже предварительно обработано, все, что требует SEO, уже предварительно обработано, и все, что чрезвычайно динамично, нам нужно беспокоиться только о безопасности, поскольку например, с точки зрения клиентской стороны, которая использует те же вызовы API, которые, например, использует наш интерфейс командной строки или наши интеграции, и так далее, и так далее. Полностью статичный веб-сайт, очень дешевый в эксплуатации, невероятно масштабируемый и так далее и тому подобное.

Гильермо: В нашем блоге нам нужно было очень быстро обновлять данные. Мы хотели исправить опечатку очень быстро, а не ждать, пока произойдет вся сборка, и это очень важное преимущество Next.js: когда вы переходите от статического к динамическому, он также дает вам эти промежуточные решения. . Для нашего блога мы использовали добавочную статическую генерацию, поэтому, по сути, мы можем перестраивать одну страницу за раз при изменении основного контента.

Гильермо: Представьте, что у нас не просто пара сотен сообщений в блоге, а множество сообщений в блогах, которые постоянно генерируются и постоянно обновляются, как я упомянул одного из наших клиентов, Washington Post, в таком случае вам нужно идти. больше к полной SSR, особенно когда вы начинаете настраивать контент для каждого пользователя. Этот сложный путь, который я только что описал, начался с одной маркетинговой страницы, блога с парой тысяч страниц и десятков тысяч или миллионов страниц. Это путь Next.js, который вы можете пройти в своем собственном бизнесе.

Гильермо: Затем вы как разработчик начинаете выбирать между, возможно, меньшей ответственностью и большей ответственностью, потому что когда вы соглашаетесь на использование SSR, вы теперь выполняете код на сервере, вы выполняете код в облаке, с вами больше ответственности. больше силы. Тот факт, что вы можете решить, где использовать тот или иной инструмент, я считаю очень и очень интересным преимуществом Next.

Дрю: С точки зрения практичности объединения генерации статического сайта и рендеринга на стороне сервера, как это работает с точки зрения серверного элемента? Нужна ли вам специальная платформа, такая как Vercel, чтобы достичь этого, или это можно сделать более прямолинейно и просто?

Гильермо: Next.js предоставляет вам сервер разработки, поэтому вы скачиваете Next и запускаете Next Dev, а это сервер разработки. Сервер разработки, очевидно, невероятно оптимизирован для разработки, например, он имеет новейшую технологию быстрого обновления, выпущенную Facebook, где… На самом деле, Facebook не выпускал ее, Facebook использует ее внутри, чтобы получить лучшую, наиболее производительную и самую надежную замену горячего модуля. , так что вы в основном печатаете, а изменения отражаются на экране, так что это сервер разработки.

Гильермо: Then Next предоставляет вам рабочий сервер под названием Next Start, а Next Start обладает всеми возможностями фреймворка для самостоятельного размещения. Что интересно в Vercel, так это то, что когда вы развертываете рядом с ним, он автоматически оптимизируется и на 100% бессерверен, что означает отсутствие какой-либо ответственности за администрирование, масштабирование, кэширование и проверку кэширования, очистку, репликацию, глобальную отработку отказа и т. д. и так далее, которые вам придется взять на себя, когда вы запускаете Next Start самостоятельно.

Гильермо: Это также большое преимущество Next.js, например, у apple.com есть несколько различных свойств, поддоменов и страниц на dotcom на Next.js, которые они размещают самостоятельно, из-за очень, очень строгих требований к безопасности и конфиденциальности. . С другой стороны, Washingtonpost.com использует Vercel, поэтому у нас есть такой широкий круг пользователей, и мы очень рады поддержать их всех. На мой взгляд, хорошая вещь в том, куда движется бессерверная технология, заключается в том, что она может дать вам лучшее из обоих миров с точки зрения наиболее оптимальной производительности, которая со временем только улучшается, с лучшим опытом разработчика, например: «Эй, у меня нет беспокоиться о любой инфраструктуре».

Дрю: Next.js — это проект с открытым исходным кодом, который разрабатывается командой Vercel. Есть ли другие участники за пределами Vercel?

Гильермо: Да, так что Google Chrome является основным, который активно отправляет серверные PR, помогает нам с оптимизацией и тестированием с партнерами, такими как очень крупные пользователи Next.js, которые уже являются частью экосистемы Google, например, из-за использования много и множество приложений, поэтому они должны активно участвовать в качестве партнеров. Facebook, мы поддерживаем отличные отношения с командой Facebook. Например, быстрое обновление, мы были первым фреймворком React, который это реализовал, и они помогли нам пройти через все, что они узнали об использовании React и быстрого обновления в Facebook.

Гильермо: Мы работаем со многими партнерами, которые имеют очень большие развертывания приложений Next.js в дикой природе для самых разных вариантов использования, например, представьте себе электронную коммерцию и контент. Кроме того, есть очень много независимых участников, людей, которые используют Next.js лично, а также преподавателей и членов передовых команд инфраструктуры в крупных компаниях. Это очень, очень широкое общественное усилие.

Дрю: Звучит так, как если бы кто-то беспокоился о том, что значительная часть этого разрабатывается Vercel, что у них может быть опасение, что они будут как бы заперты в развертывании на этой конкретной платформе, но это звучит очень похоже, что это совсем не так, и они могли бы разработать сайт и развернуть его на Firebase или Netlify или…

Гильермо: Да, абсолютно. Мне нравится сравнивать его с Kubernetes эпохи Front End в каком-то смысле, потому что, в конце концов, я твердо верю, что … Kubernetes — это то, что нужно практически всем, когда им нужно запускать процессы Linux. , например, вы говорили о мнении и вы говорите, что это хорошая технология, она очень не самоуверенна, но есть некоторые мнения, о которых мы как бы забываем. Это похоже на то, что в конце концов он вырос из запуска определенных демонов программ Linux, упакованных в виде контейнеров.

Гильермо: Next находится в аналогичном положении, потому что то, что мы считаем универсальным примитивом мира в качестве компонента React, очевидно, самоуверенно, но мы действительно думаем, что для многих предприятий, которые тяготеют к Linux, мы Я вижу то же самое в отношении React и Vue, но, к счастью, в Vue также есть Nuxt, что является очень классным решением, оно эквивалентно идеям и принципам Next. Мы тяготеем к таким платформам, как Next.js, Nuxt и Sapper для экосистемы Svelte.

Гильермо: Я думаю, что это должны быть открытые платформы, потому что, опять же, если всем это понадобится, то не стоит изобретать велосипед во всей отрасли, верно? Мы очень приветствуем эту позицию, мы приглашаем людей развернуть ее, перенастроить, перестроить, распространить и так далее.

Дрю: Совсем недавно вышла новая версия Next.js, кажется, версия 9.5. Какие существенные изменения были в этом релизе?

Гильермо: Как я уже говорил ранее, самое удивительное в том, что многие вещи начинаются статично, а затем становятся более динамичными по мере роста. Кстати, это было предприятие для WordPress. В начале WordPress был основан на подходе к базе данных статических файлов, а затем нуждался в базе данных, вроде того, что вы описали, когда PHP развивался, чтобы все больше и больше превращаться в MySQL. Что хорошо в Next.js 9.5, так это то, что он делает добавочную статическую генерацию готовой к работе функцией, поэтому мы убрали ее из нестабильного флага.

Гильермо: Эта функция позволяет вам совершить переход от статики к динамике, не отказываясь от всех преимуществ статики, и без необходимости использовать всю динамику, отображаемую сервером, поэтому она продлевает срок полезного использования статики вашего типа. То, как мы используем его, например, в Vercel, как я уже упоминал, похоже на то, что наш блог полностью предварительно визуализируется во время сборки, но затем, например, через пару минут мы собираемся сделать важное объявление, и когда мы пишем об этом в блоге, мы хотим иметь возможность настраивать, исправлять, предварительно просматривать и т. д. без необходимости выпускать пяти-десятиминутную сборку каждый раз, когда мы меняем одну букву в одном сообщении в блоге.

Гильермо: С инкрементной статической генерацией вы можете перестраивать одну страницу за раз. То, что могло занять минуты или даже секунды, в зависимости от размера вашего сайта, теперь занимает миллисекунды. Опять же, вам не нужно было отказываться от каких-либо преимуществ статики. Это, пожалуй, то, что меня больше всего воодушевило, что стало стабильным в Next.js 9.5, и особенно потому, что сообщество JS и сообщество React, а также сообщество фреймворков и сообщество, созданное статическим сайтом, говорили об этом единороге создания статического инкрементного для a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

Дрю: Это увлекательно. If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. У тебя есть напутствие?

Guillermo: No, thank you for having me.