Интеграция с Next.js
Сначала прочитайте установку и базовую настройку. В этом примере Next.js App Router монтирует Univer Docs в контейнер с явно заданной высотой.
Динамически загрузите редактор из Client Component с ssr: false1. Директива use client сама по себе не отключает предварительный рендеринг. Next.js.
Шаги интеграции
- Инициализируйте Univer в хуке
useEffect - Уничтожьте экземпляр Univer в функции, которую возвращает хук
useEffect
Пример кода
Каждое монтирование использует отдельный дочерний контейнер. Освобождение выполняется в микрозадаче после очистки внешнего React, чтобы не размонтировать вложенный React root синхронно во время commit.
TSX
'use client'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { useEffect, useRef } from 'react'import '@univerjs/preset-docs-core/lib/index.css'export default function UniverEditor() { const containerRef = useRef<HTMLDivElement>(null) useEffect(() => { const host = containerRef.current if (!host) return const container = document.createElement('div') container.style.height = '100%' host.append(container) const { univer, univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetDocsCoreEnUS, ), }, presets: [ UniverDocsCorePreset({ container, }), ], }) univerAPI.createDocument({}) return () => { queueMicrotask(() => { univer.dispose() container.remove() }) } }, []) return ( <div ref={containerRef} style={{ height: 600 }} /> )}TSX
'use client'import dynamic from 'next/dynamic'const UniverEditor = dynamic(() => import('./univer-editor'), { ssr: false })export default function Page() { return <UniverEditor />}Footnotes
-
Серверный рендеринг (SSR) выполняет код отрисовки до загрузки страницы браузером, без
windowи DOM. Client Component также может предварительно отрисовываться, поэтому SSR редактора отключается отдельно. ↩
Насколько полезно это руководство?