Рендеринг на сервері

Усі пакети reelkit працюють на сервері. Імпортуйте й рендерте їх у Next.js, Remix, Angular Universal чи будь-якій іншій конфігурації із SSR.

Як це працює

Контролер слайдера в ядрі — чиста логіка, яка під час створення не звертається до DOM. Обробники жестів, події клавіатури та анімації підключаються лише в клієнтських етапах життєвого циклу.

Під час SSR компонент Reel рендерить статичний контейнер із початково видимими слайдами (зазвичай 3: попередній, поточний, наступний). Під час гідратації він підключає контролери жестів, клавіатури та колеса миші, і все стає інтерактивним.

Пакет	Безпечний для SSR	Примітки
@reelkit/core	Так	Чиста логіка, жодних браузерних API під час імпорту чи створення
@reelkit/react	Так	Reel і ReelIndicator рендерять коректний HTML на сервері
@reelkit/angular	Так	Автономні компоненти, сумісні з SSR в Angular Universal
@reelkit/vue	Так	Компоненти та композабли, сумісні з SSR у Nuxt 3
@reelkit/react-reel-player	Так	Нічого не рендерить, поки закритий (`isOpen=false`)
@reelkit/react-lightbox	Так	Нічого не рендерить, поки закритий (`isOpen=false`)
@reelkit/angular-reel-player	Так	Нічого не рендерить, поки закритий (`isOpen=false`)
@reelkit/angular-lightbox	Так	Нічого не рендерить, поки закритий (`isOpen=false`)
@reelkit/stories-core	Так	Без прив’язки до фреймворку, не звертається до DOM
@reelkit/react-stories-player	Так	Нічого не рендерить, поки закритий (`isOpen=false`)

Next.js App Router

Reel використовує браузерні події та рефи, тож працює як Client Component. Додайте директиву "use client" на початку файлу, який використовує Reel:

tsx

Дані можна завантажити в Server Component і передати вниз:

tsx

Next.js Pages Router

Pages Router працює без додаткових налаштувань. Компонент рендериться під час SSR і гідратується на клієнті:

tsx

Реактивний розмір із SSR

Не передавайте пропс size взагалі. Якщо size не задано, Reel сам вимірює свій контейнер через ResizeObserver на клієнті. Під час SSR слайдер рендерить порожній контейнер; на гідратації він вимірює його й одразу рендерить слайди:

tsx

How auto-size works

Якщо size не задано, розмір контейнера має задавати CSS (батьківський flex або grid, явні width і height чи відсотки). Слайдер нічого не рендерить до першого вимірювання, а потім заповнює виміряні розміри й далі сам реагує на зміни.

Явний розмір (ручний спосіб)

Для контролю до пікселя передайте явний size . Оскільки window.innerWidth недоступний під час SSR, задайте значення за замовчуванням і оновіть його після монтування:

tsx

Tip

Оберіть розмір за замовчуванням під найпоширенішу область перегляду (наприклад, спершу мобільну). Якщо реальна область перегляду інша, слайдер миттєво підлаштується на гідратації.

Оверлейні компоненти

ReelPlayerOverlay та LightboxOverlay нічого не рендерять, поки isOpen={false}, тож за замовчуванням безпечні для SSR. Свій портал вони монтують лише коли відкриваються — зазвичай після дії користувача на клієнті:

tsx

Angular Universal / SSR

Усі компоненти Angular безпечні для SSR. Контролер слайдера відкладає звернення до браузерних API до afterRenderEffect. Оверлейні компоненти нічого не рендерять, поки isOpen=false, тож під час рендерингу на сервері не дають жодної розмітки.

typescript

Nuxt 3

Компоненти ReelKit для Vue працюють у Nuxt 3 без додаткових налаштувань. Оскільки Reel використовує браузерні API (події дотику, ResizeObserver), загорніть його в <ClientOnly> або дайте файлу суфікс .client.vue :

vue

Компонент Feed використовує Reel як завжди:

vue

Реактивний розмір із SSR

Не передавайте пропс size , щоб увімкнути автоматичне вимірювання. Reel займає 100% розміру батька. Під час SSR він рендерить порожній контейнер; на гідратації вимірює його й рендерить слайди:

vue

Пряме використання ядра

Якщо ви використовуєте @reelkit/core напряму для власної інтеграції з фреймворком, контролер можна створити на сервері. Викликайте attach() та observe() на клієнті:

typescript

Підсумок

What works out of the box

Імпорт будь-якого пакета reelkit на сервері
Рендеринг компонентів слайдера під час SSR (дає коректний статичний HTML)
Створення контролерів на сервері
Оверлейні компоненти, поки isOpen=false

What to keep in mind

Не передавайте size для автоматичного вимірювання або задайте значення за замовчуванням, якщо розміри залежать від області перегляду
Не викликайте attach()/observe() на сервері, коли працюєте з ядром напряму