0Pricing
React Academy · Урок

Что такое периферийный рендеринг и почему он важен

Разберитесь, как периферийные среды выполнения устраняют задержку до исходного сервера и почему React SSR на периферии превосходит традиционные серверы

«Что такое периферийный рендеринг и почему он важен» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

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

Традиционный веб-сервер размещается в одном географическом регионе. Пользователи, находящиеся рядом с этим регионом, получают быстрые ответы, но пользователи далеко от него сталкиваются со значительной задержкой — запрос контента пользователем из Токио к серверу в US-East добавляет более 200 мс к времени кругового пути до получения первого байта.

Что делает CDN (и чего не делает)

Сеть доставки контента (CDN) кэширует статические файлы, например изображения, CSS и JavaScript, в десятках точек присутствия (PoPs) по всему миру и отдаёт их из ближайшего местоположения. Однако традиционная CDN не может выполнять код — она может только отдавать заранее созданный статический контент.

Среда выполнения на периферии

Периферийная среда выполнения выполняет JavaScript в точках присутствия CDN по всему миру, устраняя круговой путь к исходному серверу для динамических запросов. Вместо маршрутизации к одному серверу запрос обрабатывается в ближайшей к пользователю точке присутствия — часто в том же городе, — что значительно уменьшает задержку.

Cloudflare Workers

Cloudflare Workers выполняют JavaScript с помощью изолированных сред V8 более чем в 300 местоположениях по всему миру. В отличие от бессерверных функций, таких как Lambda и Cloud Run, Workers почти не имеют задержки холодного запуска — она измеряется микросекундами, а не типичными для Lambda 100 и более миллисекундами, — поскольку они повторно используют изолированные среды V8, а не запускают контейнеры.

Что такое рендеринг на периферии

Рендеринг на периферии означает серверный рендеринг приложения React в ближайшей к каждому пользователю периферийной точке присутствия и немедленную отправку полученного HTML. Пользователь из Токио получает полностью отрендеренную HTML-страницу из точки присутствия в Сингапуре, а не с сервера в Вирджинии.

Сокращение задержки на практике

Обычному приложению SSR, обслуживаемому из US-East, может потребоваться 400 мс, чтобы достичь Токио (200 мс на сеть + 200 мс на серверный рендеринг). При рендеринге на периферии рендеринг выполняется в Сингапуре, что сокращает сетевую задержку до 30 мс и позволяет доставить HTML менее чем за 100 мс в общей сложности — воспринимаемое время загрузки уменьшается в 4 раза.

Ограничения периферийной среды выполнения

Периферийные среды выполнения не являются полноценными средами Node.js. Cloudflare Workers запрещают использовать основные API Node.js (fs, net, crypto), ограничивают время работы CPU 50 мс на запрос (платные тарифы позволяют использовать больше), ограничивают объём памяти и не предоставляют доступа к файловой системе. Эти ограничения требуют продуманной архитектуры.

Альтернативы Cloudflare Workers

Периферийные среды выполнения предлагают несколько платформ: Vercel Edge Functions, построенные на той же модели изолированных сред V8, Deno Deploy, использующая среду выполнения Deno на периферии, и Fastly Compute, использующая WebAssembly. У каждой платформы свои совместимость с API, глобальное покрытие и модели ценообразования.

Оптимальный вариант для рендеринга на периферии

Рендеринг на периферии особенно полезен для контента, который в основном статичен, но требует некоторой персонализации: маркетинговых страниц с вариантами A/B-тестирования, целевых страниц с контентом с учётом географического положения, записей блога с элементами для конкретного пользователя (состоянием входа в аккаунт, языком). Страницы с высокой динамичностью и интенсивной работой с базой данных получают меньше преимуществ.

Сравнение: Lambda и Workers

Функции Lambda и Cloud Run запускают контейнеры, загружают Ваш код, инициализируют среду выполнения, а затем выполняются — поэтому холодный запуск занимает 100–1000 мс. Workers повторно используют уже работающие изолированные среды V8, благодаря чему холодный запуск практически незаметен и занимает менее 5 мс.

Периферия как часть гибридной архитектуры

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

Холодный запуск Cloudflare Workers

Почему у Cloudflare Workers холодный запуск почти отсутствует по сравнению с AWS Lambda?

Итоги урока

Периферийный рендеринг выполняет JavaScript в точках присутствия CDN по всему миру, устраняя круговые запросы к исходному серверу и значительно уменьшая задержку. Cloudflare Workers лидируют благодаря холодному запуску на основе изолированных сред V8, занимающему микросекунды, в более чем 300 местоположениях. Компромиссы существенны: отсутствуют API Node.js и ограничено время работы CPU, поэтому периферийный рендеринг лучше всего подходит для маркетинговых страниц и персонализированного, но преимущественно статического контента, а не для страниц с интенсивной работой с базой данных.

Часто задаваемые вопросы

Урок «Что такое периферийный рендеринг и почему он важен» бесплатный?

Да — полный текст урока «Что такое периферийный рендеринг и почему он важен» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Что такое периферийный рендеринг и почему он важен»?

Разберитесь, как периферийные среды выполнения устраняют задержку до исходного сервера и почему React SSR на периферии превосходит традиционные серверы Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Что такое периферийный рендеринг и почему он важен»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что такое периферийный рендеринг и почему он важен
  2. React на Cloudflare Workers с Hono
  3. Потоковая SSR с периферии
  4. Стратегии периферийного кэширования для приложений React
← Назад к React Academy