О HTTP / 2

HTTP / 2 или H2 - это основная версия протокола HTTP, используемого во всемирной паутине. Он основан на экспериментальном протоколе SPDY, разработанном Google, и направлен на ускорение интернет-обмена между клиентами и серверами.
Все основные браузеры поддерживают HTTP / 2 уже несколько лет, как вы можете видеть в разделе Могу ли я использовать . В 2019 году большинство современных стартапов SAAS GAFA / NATU уже использовали его для своих продуктов и услуг (по состоянию на сентябрь 2019 года 41,0% из 10 миллионов веб-сайтов поддерживали HTTP / 2).

Google и IETF даже уже работают над протоколом на основе UDP под названием QUIC, недавно переименованным в HTTP / 3 или H3. Chrome и Mozilla Firefox уже поддерживает его, но пока давайте сосредоточимся на H2.

Преимущества HTTP / 2

В большинстве случаев HTTP / 2 значительно быстрее HTTP / 1.1 и настоятельно рекомендуется Google для повышения производительности и оптимизации SEM, как вы можете видеть в Lighthouse. Причины тому:

  • HTTP / 2 - это двоичный протокол поверх TCP, поэтому передача данных более компактна и менее подвержена ошибкам, чем текстовые протоколы (например, HTTP / 1.1).
  • HTTP / 2 мультиплексирован, что означает, что он поддерживает несколько запросов в одном соединении и, таким образом, сокращает количество операций установления связи между сервером и клиентом. HTTP / 1.1 ограничен одним запросом на соединение.
  • HTTP / 2 использует сжатие заголовков defacto, используя HPACK в качестве формата сжатия для эффективного представления заголовков HTTP.
  • HTTP / 2 представил HTTP / 2-Push, который позволяет серверу автоматически помещать в кэш клиента ресурсы, которые потребуются странице, без дополнительных запросов со стороны клиента.

А как насчет Next.js и Express?

Node.js представил встроенную поддержку HTTP / 2 через http2 встроенный пакет в своей версии 8 июля 2017 года в качестве экспериментальной функции и в качестве стабильной функции в Node.js 10 LTS.

Next.js - это известный фреймворк для рендеринга на стороне сервера, использующий Node.js и React для создания быстрых, предварительно обработанных и оптимизированных веб-сайтов или веб-приложений на основе React. К сожалению, начиная с версии 9 Next.js еще не поддерживает HTTP / 2.

Наше решение для HTTP / 2 будет использовать возможность Next.js, чтобы мы могли определить собственное серверное приложение:

  • использование express для создания гибкой структуры маршрутизации
  • в сочетании с spdy для создания сервера HTTP / 2

Помимо имени, пакет spdy обеспечивает поддержку как HTTP / 2 (H2), так и spdy (2,3,3.1), совместим с Express и предоставляет естественный интерфейс http module и резерв для обычного https.

Давайте углубимся в реализацию

Вот шаги, которые мы собираемся предпринять:

  • 1. Настройте проект и создайте интерфейс с двумя простыми страницами.
  • 2. Создайте сертификат SSL для локальной разработки.
  • 3. Создайте собственный сервер с помощью next.js + express + spdy.
  1. Настройте проект и интерфейс
    Начните с инициализации пакета npm и создания приложения next.js с двумя основными статическими страницами:
mkdir next-express-h2-app
cd next-express-h2-app
npm init
npm install next react react-dom express spdy compression --save
npm install cross-env --save-dev

Создайте папку pages и два файла внутри, index.js и about.js

2. Создание локального SSL-сертификата для разработки
Поскольку ни один из основных браузеров не поддерживает HTTP / 2 без шифрования, вам понадобится генерировать локальные SSL-сертификаты даже для разработки. С OpenSSL это сделать довольно просто.

Перейдите в корень вашего проекта и используйте эту команду для создания двух файлов, которые мы будем использовать для запуска сервера в разработке:

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -keyout privateKey.key -out certificate.crt

3. Создайте собственный сервер
. Теперь создайте server.js файл в корне вашего проекта и начните с создания классического приложения Next.js:

Затем настройте свой закрытый ключ и сертификат, которые мы скоро настроим в spdy:

Теперь мы воспользуемся пакетом compression для настройки сжатия тела запроса. HTTP / 2 обеспечивает встроенную поддержку сжатия заголовков HTTP, но, как правило, рекомендуется также сжимать тело запросов, поскольку оно часто состоит из текста или сжимаемых данных:

Затем мы воспользуемся API Next.js, чтобы подготовить приложение и настроить с ним express и spdy:

app.prepare().then(() => {
  // express setup
  // spdy setup
}

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

И наконец, настраиваем spdy сервер:

Заключение

Теперь вы можете запускать свое приложение, используя сценарии npm:

  • сначала создайте его с npm run build
  • и начните с npm run dev

Если вы хотите протестировать его с помощью оптимизированной для производства сборки, просто сделайте то же самое с

  • npm run release
  • npm run start

Открыв консоль разработчика Chrome на https://localhost:3000, вы увидите, что протокол, используемый для обслуживания содержимого, теперь обозначен как h2:

Полный код можно найти здесь:



typedef42 / nextjs-express-http2-example
Загрузите пример: git clone https://github.com/typedef42/nextjs-express-http2-example.git cd … github.com



Благодарим @chabou и @ Жюля Маркуэля за обзор этой истории.