4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T37da,--- title: Static Rendering description: A minimal, memoized, read-only version of Plate with RSC/SSR support. --- `` is a **fast, read-only** React component for rendering Plate content, optimized for **server-side** or **React Server Component** (RSC) environments. It avoids client-side editing logic and memoizes node renders for better performance compared to using [``](/docs/api/core/plate-components) in read-only mode. It's a core part of [`serializeHtml`](/docs/api/core/plate-plugin#serializehtml) for HTML export and is ideal for any server or RSC context needing a non-interactive, presentational view of Plate content. ## Key Advantages - **Server-Safe:** No browser API dependencies; works in SSR/RSC. - **No Plate Editor Overhead:** Excludes interactive features like selections or event handlers. - **Memoized Rendering:** Uses `_memo` and structural checks to re-render only changed nodes. - **Partial Re-Renders:** Changes in one part of the document don't force a full re-render. - **Lightweight:** Smaller bundle size as it omits interactive editor code. ## When to Use `` - Generating HTML with [HTML Serialization](/docs/html). - Displaying server-rendered previews in Next.js (especially with RSC). - Building static sites with read-only Plate content. - Optimizing performance-critical read-only views. - Rendering AI-streaming content. For interactive read-only features (like comment popovers or selections), use the standard `` component in the browser. For purely server-rendered, non-interactive content, `` is the recommended choice. ## Kit Usage ### Installation The fastest way to enable static rendering is with the `BaseEditorKit`, which includes pre-configured base plugins that work seamlessly with server-side rendering. ### Add Kit ```tsx import { createSlateEditor } from 'platejs'; import { PlateStatic } from 'platejs/static'; import { BaseEditorKit } from '@/components/editor/editor-base-kit'; const editor = createSlateEditor({ plugins: BaseEditorKit, value: [ { type: 'h1', children: [{ text: 'Server-Rendered Title' }] }, { type: 'p', children: [{ text: 'This content is rendered statically.' }] }, ], }); // Render statically export default function MyStaticPage() { return ; } ``` ### Example See a complete server-side static rendering example: ## Manual Usage ### Create a Slate Editor Initialize a Slate editor instance using `createSlateEditor` with your required plugins and components. This is analogous to using `usePlateEditor` for the interactive `` component. ```tsx title="lib/plate-static-editor.ts" import { createSlateEditor } from 'platejs'; // Import your desired base plugins (e.g., BaseHeadingPlugin, MarkdownPlugin) // Ensure you are NOT importing from /react subpaths for server environments. const editor = createSlateEditor({ plugins: [ // Add your list of base plugins here // Example: BaseHeadingPlugin, MarkdownPlugin.configure({...}) ], value: [ // Example initial value { type: 'p', children: [{ text: 'Hello from a static Plate editor!' }], }, ], }); ``` ### Define Static Node Components If your interactive editor uses client-side components (e.g., with `use client` or event handlers), you **must** create static, server-safe equivalents. These components should render pure HTML without browser-specific logic. ```tsx title="components/ui/paragraph-node-static.tsx" import React from 'react'; import type { SlateElementProps } from 'platejs/static'; export function ParagraphElementStatic(props: SlateElementProps) { return ( {props.children} ); } ``` Create similar static components for headings, images, links, etc. ### Map Plugin Keys to Static Components Create an object that maps plugin keys or node types to their corresponding static React components, then pass it to the editor. ```ts title="components/static-components.ts" import { ParagraphElementStatic } from './ui/paragraph-node-static'; import { HeadingElementStatic } from './ui/heading-node-static'; // ... import other static components export const staticComponents = { p: ParagraphElementStatic, h1: HeadingElementStatic, // ... add mappings for all your element and leaf types }; ``` ### Render `` Use the `` component, providing the `editor` instance configured with your components. ```tsx title="app/my-static-page/page.tsx (RSC Example)" import { createSlateEditor } from 'platejs'; import { PlateStatic } from 'platejs/static'; // import { BaseHeadingPlugin, ... } from '@platejs/basic-nodes'; // etc. import { staticComponents } from '@/components/static-components'; export default async function MyStaticPage() { // Example: Fetch or define editor value const initialValue = [ { type: 'h1', children: [{ text: 'Server-Rendered Title' }] }, { type: 'p', children: [{ text: 'Content rendered statically.' }] }, ]; const editor = createSlateEditor({ plugins: [/* your base plugins */], components: staticComponents, value: initialValue, }); return ( ); } ``` If you pass a `value` prop directly to ``, it will override `editor.children`. ```tsx ``` ### Memoization Details `` enhances performance through memoization: - Each `` and `` is wrapped in `React.memo`. - **Reference Equality:** Unchanged node references prevent re-renders. - **`_memo` Field:** Setting `node._memo = true` (or any stable value) on an element or leaf can force Plate to skip re-rendering that specific node, even if its content changes. This is useful for fine-grained control over updates. ## Client-Side Alternative: `PlateView` For cases where you need **minimal interactivity** with static content, use ``. This component wraps `` and adds client-side event handlers for user interactions while maintaining the performance benefits of static rendering. ### Example: Server Component with Both Static Views ```tsx title="app/document/page.tsx" import { createStaticEditor, PlateStatic } from 'platejs/static'; import { BaseEditorKit } from '@/components/editor/editor-base-kit'; import { InteractiveViewer } from './interactive-viewer'; export default async function DocumentPage() { const content = await fetchDocument(); // Your document data // Server-side static editor const editor = createStaticEditor({ plugins: BaseEditorKit, value: content, }); return (

{/* Pure static rendering - no interactivity */}

Static View (Server Rendered)

{/* Interactive view - rendered on client */}

Interactive View

); } ``` ### Example: Client Component with PlateView ```tsx title="app/document/interactive-viewer.tsx" 'use client'; import { usePlateViewEditor } from 'platejs/react'; import { PlateView } from 'platejs/react'; import { BaseEditorKit } from '@/components/editor/editor-base-kit'; export function InteractiveViewer({ value }) { const editor = usePlateViewEditor({ plugins: BaseEditorKit, value, }); return ; } ``` ### Key Features of `PlateView` - **Client-side only**: Requires `'use client'` directive - **Adds interactivity**: Enables user interactions with the content (e.g., text selection, copying, future interactions like tooltips, highlights, etc.) - **Minimal overhead**: Still uses `PlateStatic` internally for rendering - **Use with `usePlateViewEditor`**: Creates a static editor optimized for view-only React components - **ViewPlugin included**: The static editor automatically includes `ViewPlugin` which provides event handling capabilities `PlateView` cannot be used in Server Components. If you're passing an editor from a server component to a client component, you'll encounter serialization errors. Use `PlateStatic` on the server side, or create the editor client-side with `usePlateViewEditor`. ## `PlateStatic` vs. `PlateView` vs. `Plate` + `readOnly` | Aspect | `` | `` | `` + `readOnly` | | --------------------- | ----------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ | | **Environment** | Server/Client (SSR/RSC safe) | Client-only | Client-only | | **Interactivity** | None | Minimal (selection, copy, toolbar, etc.) | Full interactive features (browser-only) | | **Browser APIs** | Not used | Minimal (event handlers) | Full usage | | **Performance** | Best - static HTML only | Good - static rendering + event delegation | Heavier - full editor internals | | **Bundle Size** | Smallest | Small | Largest | | **Use Cases** | Server rendering, HTML export | Client-side content with basic interactions | Full read-only editor with all features | | **Recommendation** | SSR/RSC without any interactions | Client-side content needing light interactivity | Client-side with complex interactive needs | ## RSC/SSR Example In a Next.js App Router (or similar RSC environment), `` can be used directly in Server Components: ```tsx title="app/preview/page.tsx (RSC)" import { createSlateEditor } from 'platejs'; import { PlateStatic } from 'platejs/static'; // Example base plugins (ensure non-/react imports) // import { BaseHeadingPlugin } from '@platejs/basic-nodes'; import { staticComponents } from '@/components/static-components'; // Your static components mapping export default async function Page() { // Fetch or define content server-side const serverContent = [ { type: 'h1', children: [{ text: 'Rendered on the Server! 🎉' }] }, { type: 'p', children: [{ text: 'This content is static and server-rendered.' }] }, ]; const editor = createSlateEditor({ // plugins: [BaseHeadingPlugin, /* ...other base plugins */], plugins: [], // Add your base plugins components: staticComponents, value: serverContent, }); return ( ); } ``` This renders the content to HTML on the server without needing a client-side JavaScript bundle for `PlateStatic` itself. ## Pairing with `serializeHtml` For generating a complete HTML string (e.g., for emails, PDFs, or external systems), use `serializeHtml`. It utilizes `` internally. ```ts title="lib/html-serializer.ts" import { createSlateEditor } from 'platejs'; import { serializeHtml } from 'platejs/static'; import { staticComponents } from '@/components/static-components'; // import { BaseHeadingPlugin, ... } from '@platejs/basic-nodes'; async function getDocumentAsHtml(value: any[]) { const editor = createSlateEditor({ plugins: [/* ...your base plugins... */], components: staticComponents, value, }); const html = await serializeHtml(editor, { // editorComponent: PlateStatic, // Optional: Defaults to PlateStatic props: { className: 'prose max-w-none' }, // Example: Pass props to the root div }); return html; } // Example Usage: // const mySlateValue = [ { type: 'h1', children: [{ text: 'My Document' }] } ]; // getDocumentAsHtml(mySlateValue).then(console.log); ``` For more details, see the [HTML Serialization guide](/docs/html). ## API Reference ### `` Props ```ts import type React from 'react'; import type { Descendant } from 'slate'; import type { PlateEditor } from 'platejs/core'; // Adjust imports as per your setup interface PlateStaticProps extends React.HTMLAttributes { /** * The Plate editor instance, created via `createSlateEditor`. * Must include plugins and components relevant to the content being rendered. */ editor: PlateEditor; /** * Optional Plate `Value` (array of `Descendant` nodes). * If provided, this will be used for rendering instead of `editor.children`. */ value?: Descendant[]; /** Inline CSS styles for the root `div` element. */ style?: React.CSSProperties; // Other HTMLDivElement attributes like `className`, `id`, etc., are also supported. } ``` - **`editor`**: An instance of `PlateEditor` created with `createSlateEditor`, including components configuration. - **`value`**: Optional. If provided, this array of `Descendant` nodes will be rendered, overriding the content currently in `editor.children`. ## Next Steps - Explore [HTML Serialization](/docs/html) for exporting content. - Learn about using Plate in [React Server Components](/docs/installation/rsc). - Refer to individual plugin documentation for their base (non-React) imports.4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(guides)/static.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(guides)/static.mdx"}],"className":"h-[70svh] min-h-80"}]]}]