Пакет @nivo/static и серверный рендеринг

В экосистеме Nivo основная сложность серверного рендеринга связана с тем, что большинство компонентов построено на React и активно использует браузерные API: измерение размеров контейнера, обработку событий, анимации и работу с DOM. При классическом SSR такие зависимости становятся проблемой, поскольку сервер не имеет доступа к DOM и не может корректно выполнить полный рендер интерактивных компонентов.

Пакет @nivo/static решает эту задачу за счёт генерации «облегчённого» представления графиков, лишённого интерактивности и зависимостей от браузерной среды. На сервере формируется статическая версия диаграммы (SVG-разметка или упрощённый набор примитивов), которая затем может быть встроена в HTML и передана клиенту для последующей гидратации или полной замены интерактивным графиком.

Архитектурная идея статического рендеринга

Статический слой Nivo строится вокруг принципа разделения:

  • data layer — входные данные графика
  • scales layer — преобразование данных в координаты
  • render layer — генерация SVG без зависимости от DOM
  • client layer (Nivo core) — интерактивность, анимации, события

В пакете @nivo/static используется только первые три слоя. Это позволяет сформировать детерминированный результат, пригодный для серверного выполнения.

Ключевая особенность заключается в том, что результатом работы становится не React-компонент, а сериализуемая SVG-структура.

Отличие от стандартного SSR в React

Обычный SSR React предполагает:

  • выполнение React-компонентов на сервере
  • генерацию HTML-строки через renderToString или renderToStaticMarkup
  • последующую гидратацию на клиенте

Однако для Nivo это не всегда возможно, так как:

  • часть компонентов зависит от ResizeObserver
  • используются вычисления размеров контейнера
  • присутствуют анимации через requestAnimationFrame
  • сложные interaction hooks требуют браузерного окружения

@nivo/static обходит эти ограничения, предоставляя отдельный слой генерации SVG без React lifecycle.

Основной принцип работы @nivo/static

Процесс можно описать последовательностью шагов:

  1. Получение данных графика
  2. Применение layout-алгоритмов (bar, pie, line и т.д.)
  3. Преобразование данных в координаты
  4. Генерация SVG-элементов через чистые функции
  5. Возврат сериализуемого результата

Результат не содержит:

  • React hooks
  • DOM API
  • браузерных событий

Установка и структура пакета

Пакет устанавливается отдельно от основной библиотеки Nivo:

npm install @nivo/static

Внутри он представляет собой набор функций для генерации статических графиков, сгруппированных по типам визуализаций.

Типичная структура:

@nivo/static
 ├── bar
 ├── line
 ├── pie
 ├── heatmap
 ├── sankey
 └── shared (scales, layouts, utils)

Генерация статического bar chart

Основной пример использования связан с генерацией столбчатых диаграмм.

import { generateBar } from '@nivo/static'

const data = [
  { country: 'A', value: 40 },
  { country: 'B', value: 80 },
  { country: 'C', value: 60 }
]

const chart = generateBar({
  width: 600,
  height: 400,
  data,
  indexBy: 'country',
  keys: ['value'],
  margin: { top: 20, right: 20, bottom: 50, left: 60 }
})

const svg = chart.svg

Результатом является SVG-строка, которую можно вставить напрямую в HTML:

<div>
  <!-- server generated -->
  <svg viewBox="0 0 600 400">
    ...
  </svg>
</div>

Статический line chart

Линейные графики требуют дополнительной обработки точек и интерполяции.

import { generateLine } from '@nivo/static'

const data = [
  {
    id: 'series-1',
    data: [
      { x: 0, y: 10 },
      { x: 1, y: 20 },
      { x: 2, y: 15 }
    ]
  }
]

const chart = generateLine({
  width: 700,
  height: 300,
  data,
  xScale: { type: 'point' },
  yScale: { type: 'linear', min: 0, max: 30 }
})

Внутренне происходит:

  • вычисление масштабов
  • построение path через SVG d атрибут
  • генерация точек маркеров (если включены)

Pie chart в статическом режиме

Круговые диаграммы в @nivo/static строятся через вычисление угловых сегментов.

import { generatePie } from '@nivo/static'

const data = [
  { id: 'A', value: 30 },
  { id: 'B', value: 50 },
  { id: 'C', value: 20 }
]

const chart = generatePie({
  width: 400,
  height: 400,
  data
})

Внутренний алгоритм:

  • суммирование значений
  • вычисление долей
  • преобразование в радианы
  • построение SVG arc paths

Особенности серверного SVG-вывода

SVG, генерируемый @nivo/static, обладает рядом характеристик:

  • полностью детерминированный результат
  • отсутствие случайных значений
  • фиксированные координаты
  • отсутствие интерактивных атрибутов (onClick, onMouseMove)
  • отсутствие CSS-in-JS зависимостей

Это делает его пригодным для:

  • серверных шаблонов
  • email-рендеринга
  • статической генерации страниц (SSG)
  • pre-rendering API ответов

Интеграция с Next.js

В SSR-фреймворках вроде Next.js статический слой используется для предварительного рендеринга графиков на сервере.

Пример интеграции:

import { generateBar } from '@nivo/static'

export async function getServerSideProps() {
  const data = await fetchData()

  const chart = generateBar({
    width: 800,
    height: 500,
    data,
    indexBy: 'name',
    keys: ['value']
  })

  return {
    props: {
      svg: chart.svg
    }
  }
}

На клиенте SVG вставляется без необходимости повторной генерации.

Отличие от гидратации Nivo core

Классический Nivo-компонент после SSR требует гидратации:

  • повторное создание графика в браузере
  • синхронизация состояния
  • повторное вычисление layout

Статический вариант:

  • не требует гидратации
  • не содержит React state
  • не запускает lifecycle hooks

Это уменьшает нагрузку на клиентскую часть, но исключает интерактивность.

Ограничения статического подхода

Использование @nivo/static накладывает архитектурные ограничения:

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

Производительность серверной генерации

Сильной стороной является предсказуемая стоимость вычислений:

  • линейная сложность по количеству точек данных
  • отсутствие DOM-операций
  • минимальная нагрузка на память

При массовом рендеринге (например, генерация тысяч графиков) основной лимит определяется CPU, а не браузерными ограничениями.

Использование в статической генерации сайтов

В SSG-подходах (например, Gatsby или Next.js Static Export) @nivo/static позволяет:

  • генерировать графики на этапе сборки
  • кэшировать SVG как обычные HTML-фрагменты
  • исключать клиентский JavaScript для визуализации

Это особенно эффективно для аналитических дашбордов с неизменяемыми данными.

Расширение через кастомные генераторы

Внутренняя архитектура допускает создание собственных генераторов на основе базовых утилит:

  • scale utilities (linear, band, point)
  • layout engines
  • SVG path builders

Это позволяет строить специализированные графики, сохраняя совместимость со статическим рендерингом.

Совместимость с типами данных Nivo

@Nivo/static поддерживает тот же формат данных, что и основной Nivo:

  • bar: массив объектов с ключами
  • line: массив серий
  • pie: массив категорий
  • heatmap: матричная структура

Это снижает стоимость миграции между интерактивным и статическим режимами.

SVG как промежуточный формат

Ключевым элементом является использование SVG не как финального DOM-элемента, а как промежуточного представления:

  • может быть сериализован в строку
  • может быть преобразован в HTML
  • может быть сохранён как файл
  • может быть встроен в PDF-генерацию

Это делает @nivo/static универсальным инструментом серверной визуализации.

Оглавление