Многопоточность в NextJS: как запустить и нужно ли?05.10.2024 13:00

На определённом этапе своей карьеры я задался вопросом: может ли Next.js работать в многопоточном режиме? Оказалось, что нет. Это побудило меня разобраться, как можно организовать многопоточную работу Next.js и насколько это оправдано для сайтов с высокой нагрузкой.

Содержание

Какую страницу будем нагружать?

Для тестирования я использую страницу своего проекта по мониторингу падений сайтов с уведомлениями в Telegram. Основная страница сайта генерируется в статичную страницу (SSR), имеет картинки визуализации работы, на ней нет JS-интерактива. Одна из ключевых задач этой страницы — корректный рендеринг для SEO-оптимизации.

В статичном виде вес страницы составляет 71,2 КБ, а в полностью отрендеренном виде — 4,2 МБ.

Выглядит страница вот так:

02ec8a08bd91d00ed9361d2c2b825933.png

Код страницы включает метаданные, Open Graph и HTML, написанный с использованием JSX (внутри используются такие же React-компоненты без интерактива, структурированные по секциям): 

import { Metadata } from "next";
import HeaderComponent from "../pages-components/header/HeaderComponent";
import MainComponent from "../pages-components/main/MainComponent";
import FeaturesComponent from "../pages-components/features/FeaturesComponent";
import FooterComponent from "../pages-components/footer/FooterComponent";
import AdvantagesComponent from "../pages-components/advantages/AdvantagesComponent";
import Price from "../pages-components/price/Price";
import HowItWorksComponent from "../pages-components/how-it-works/HowItWorksComponent";
import { MessageUsComponent } from "@/util/components/MessageUsComponent";

export const metadata: Metadata = {
  title: "Мониторинг сайтов | Проверятор",
  description:
    "Бесплатный мониторинг доступности сайтов 24\\7. Уведомим о сбоях в работе сайта в Telegram, по почте или SMS. Проверка сайта раз в минуту (включая Nginx, WordPress и другие сайты)",
  keywords: "мониторинг сайтов, проверка доступности, проверка сбоев сайта",
  icons: {
    icon: "/favicon.ico",
  },
  alternates: {
    canonical: `https://proverator.ru`,
  },
  openGraph: {
    title: "Мониторинг сайтов | Проверятор",
    description:
      "Бесплатный мониторинг доступности сайтов 24\\7. Уведомим о сбоях в работе сайта в Telegram, по почте или SMS. Проверка сайта раз в минуту (включая Nginx, WordPress и другие сайты)",
    url: "https://proverator.ru",
    type: "website",
    images: ["https://proverator.ru/banner.png"],
  },
};

export default function Home() {
  return (
    <>