SSR Rendering (Optional)

With server-side rendering (SSR), your own server renders the video, not the browser. SSR is optional. The SDK uses browser rendering when you do not give it a renderer.

When to use SSR

• You must support browsers without WebCodecs, such as Firefox and Safari.
• You render long or heavy videos.
• You need full control of the render process.
• You want to debug renders on your own machine.

How it works

When you give an HttpRenderer to the customRenderer prop, the SDK sends render jobs to your server:

1. The SDK sends a POST request to {endpoint}/render with { id, inputProps }.
2. Your server starts the render and returns a renderId.
3. The SDK sends POST requests to {endpoint}/progress until the render is done or fails.
4. Your server returns the URL and the size of the file.

Your server renders a composition that you write. See Custom compositions.

Connect the editor

"use client";

import React from 'react';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function Page() {
  const ssrRenderer = React.useMemo(
    () =>
      new HttpRenderer('/api/latest/ssr', {
        type: 'ssr',
        entryPoint: '/api/latest/ssr',
      }),
    [],
  );

  return (
    <ReactVideoEditor
      projectId="example-project"
      fps={30}
      customRenderer={ssrRenderer}
    />
  );
}

The editor uses cloud mode because an HttpRenderer is enabled by default. The props set the render mode. The editor has no control that changes the mode, and it does not change to browser mode when a server render fails.

If you set enableWebRender={true} and want browser mode, create the renderer with { enabled: false } as the third argument.

Next steps

• SSR setup guide: add the server routes.
• Custom compositions: write the composition that your server renders.
• Common problems: fix SSR problems.