SSR и SSG

Chakra UI — это современная библиотека компонентов для React, предоставляющая гибкую систему стилизации и готовые UI-компоненты. При разработке приложений важно понимать, как Chakra UI взаимодействует с серверной и статической генерацией страниц, особенно в сочетании с фреймворками вроде Next.js. Разберем ключевые концепции SSR (Server-Side Rendering) и SSG (Static Site Generation) с точки зрения Chakra UI.

Server-Side Rendering (SSR)

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

Основные моменты SSR с Chakra UI:

  1. Серверная генерация стилей

    Chakra UI использует @chakra-ui/react и @emotion/react для CSS-in-JS. При SSR необходимо корректно собирать стили на сервере, чтобы на клиенте не возникало “мерцания” стилей (FOUC, Flash of Unstyled Content).

  2. Использование ChakraProvider и ServerStyleContext

    В Next.js создается кастомный _document.js для интеграции Chakra UI со SSR:

    // pages/_document.js
import { ColorModeScript } from '@chakra-ui/react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { createServerStyleSheet } from '@chakra-ui/react';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = createServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="ru">
        <Head />
        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

    Ключевые моменты:

    • ColorModeScript гарантирует, что цветовая схема (темная/светлая) будет синхронизирована между сервером и клиентом.
    • createServerStyleSheet() из Chakra UI собирает стили, генерируемые на сервере, чтобы передать их вместе с HTML.

  3. Проблемы при SSR

    • Некорректная инициализация состояния colorMode может привести к мерцанию темы при загрузке.
    • Компоненты, зависящие от window или других браузерных API, требуют условного рендеринга (if (typeof window !== 'undefined')).

Static Site Generation (SSG)

SSG генерирует HTML на этапе сборки. В отличие от SSR, каждая страница формируется один раз и раздается как статический файл.

Особенности использования Chakra UI с SSG:

  1. Настройка ChakraProvider

    В _app.js необходимо обернуть все приложение в ChakraProvider:

    // pages/_app.js
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../theme';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

    Это гарантирует, что статически сгенерированные страницы будут использовать единую тему и стили.

  2. Предварительная генерация данных

    SSG работает через getStaticProps в Next.js:

    export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60, // ISR — обновление каждые 60 секунд
  };
}

    Chakra UI корректно рендерит компоненты с полученными данными. Статика позволяет ускорить загрузку и уменьшить нагрузку на сервер.

  3. Интерактивные компоненты

    Даже при SSG Chakra UI полностью поддерживает интерактивные элементы: модальные окна, меню, переключатели тем и тултипы. Все они корректно инициализируются на клиенте после гидратации.

Особенности интеграции SSR и SSG

Особенность SSR SSG
Рендеринг на сервере Каждый запрос Во время сборки
SEO Отличное Отличное
Динамические данные Да Только через ISR (Incremental Static Regeneration)
Использование Chakra UI Требует ServerStyleSheet Простое обертывание в ChakraProvider
Color Mode Важно синхронизировать Менее критично, можно через ColorModeScript

Рекомендации при работе с Chakra UI и SSR/SSG

  • Всегда использовать ChakraProvider и ColorModeScript — это предотвращает расхождение темы между сервером и клиентом.
  • Для SSR: избегать использования браузерных объектов в серверном коде или оборачивать их проверкой typeof window !== 'undefined'.
  • Для SSG: компоненты Chakra UI полностью совместимы с getStaticProps и getStaticPaths. Можно комбинировать SSG с ISR для динамических обновлений.
  • Тема и кастомизация: создать отдельный файл theme.js, чтобы поддерживать единую цветовую палитру и стили через весь проект, независимо от типа генерации страниц.

Интерактивные примеры компонентов

Для демонстрации SSR/SSG можно использовать следующие компоненты Chakra UI:

  • Button с динамическим цветом темы: изменяет стиль при colorMode.
  • Modal и Drawer: полностью работают при гидратации на клиенте после SSG.
  • Menu и Popover: корректно отображаются как на сервере, так и на статических страницах, при условии правильной инициализации PortalManager.

Chakra UI предоставляет прозрачный и гибкий механизм работы с SSR и SSG, минимизируя сложности интеграции CSS-in-JS и упрощая разработку высокопроизводительных приложений на React и Next.js. Правильная настройка ChakraProvider, ColorModeScript и ServerStyleSheet позволяет создавать приложения, которые выглядят одинаково красиво на сервере и клиенте.

Оглавление