Getting Setup

This guide explains how to set up Server-Side Rendering (SSR) as an optional rendering backend for the RVE SDK. The SDK ships with client-side rendering by default — SSR is for when you need server-side control, broader browser support, or production-scale rendering.

What is SSR?

Server-Side Rendering means the video gets rendered on your own server (or local dev machine), not in the browser. This is useful when you're:

• Supporting browsers without WebCodecs (Firefox, Safari)
• Rendering long or complex videos that are too heavy for client-side
• Debugging render issues with full server visibility
• Running production workloads where you need server-side control

How It Works

The SDK uses the HttpRenderer utility to communicate with your server via two API endpoints:

1. A POST request is sent to {base}/render to start the job
2. The SDK polls {base}/progress to track completion
3. The rendered video URL is returned when done

Getting Set Up

1. Wire the Editor

Pass an HttpRenderer to the customRenderer prop:

"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}
    />
  );
}

2. Implement the API Endpoints

See the Setting Up Server Rendering guide for the full API contract and a working Next.js implementation.

Migrating to Vite?

If you're moving into a Vite-based project, you'll need to recreate the API route that handles SSR rendering. In the Next.js example, this route lives at /api/render/ssr — make sure your Vite project mirrors that logic using something like Express, Fastify, or your server of choice.

You can copy the logic from /app/api/render/ssr/route.ts and adapt it to your backend setup. The key is that the client knows where to POST the render request and that the server can handle it with the correct rendering logic.

Need help? Open an issue or reach out via hello@reactvideoeditor.com.