RVE LogoReact Video EditorDOCS
Documentation

Introduction

Optional server-side rendering setup for React Video Editor

SSR Rendering (Optional)

Server-Side Rendering means the video gets rendered on your own server (or local dev machine), instead of in the browser. This is optional — the SDK ships with client-side rendering enabled by default.

Do you need SSR?

Most users can get started without SSR. Client-side rendering works out of the box with zero server setup. Consider SSR if you need to support Firefox/Safari, render long or complex videos, or want server-side control over the rendering pipeline.

When to Use SSR

  • Supporting browsers without WebCodecs (Firefox, Safari)
  • Rendering long or resource-intensive videos
  • Needing full control and visibility over the rendering process
  • Debugging render issues on your own machine

How It Works

When you provide an SSR renderer via the customRenderer prop, the SDK sends render jobs to your server instead of rendering in the browser:

  1. A POST request is sent to your render endpoint
  2. Your server renders the video
  3. The rendered video is saved and a download URL is returned

Getting Set Up

Pass an HttpRenderer to the customRenderer prop:

page.tsx
"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/render/ssr', {
      type: 'ssr',
      entryPoint: '/api/render/ssr'
    }), []
  );

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

With enableWebRender={true} alongside the customRenderer, users can toggle between browser and server rendering in the settings panel.


Next Steps