Getting Setup

This short guide explains how Server-Side Rendering (SSR) works in React Video Editor Pro, and how to set it up inside the Next.js codebase.

What is SSR?

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

• Working locally during development
• Debugging render issues
• Not ready to set up cloud rendering

SSR is ideal when you want full control and visibility — everything happens on your own machine or server.

How It Works in RVE Pro

RVE Pro uses a custom API route in Next.js (/api/render/ssr) that handles video rendering via Remotion’s Node.js APIs. When you trigger a render:

1. A POST request is sent to /api/render/ssr
2. The server uses Remotion to render the video based on your composition
3. The rendered video is saved to a local file or streamed to the browser

Getting Set Up (It's Super Easy)

SSR rendering in RVE Pro works straight out of the box. Just make sure you’re using the correct SSR render config when you load the editor.

SSR Rendering Example

"use client";

import React from 'react';
import { APP_CONFIG } from "../constants";
import { HttpRenderer } from '../../lib/http-renderer';
import { ReactVideoEditor } from '@react-video-editor/core';

export default function Page() {
  const PROJECT_ID = "example-project";

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

  return (
    <ReactVideoEditor
      projectId={PROJECT_ID}
      defaultOverlays={DEFAULT_PROJECT_OVERLAYS}
      fps={APP_CONFIG.fps}
      renderer={ssrRenderer}
      showDefaultThemes={true}
    />
  );
}

That’s it — now you’re rendering videos server-side using your own machine or server.

Migrating to Vite?

If you’re moving RVE Pro 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 (/api/render/ssr) and that the server can handle it with the correct Remotion logic.

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

Let me know if you also want to show what’s inside `route.ts` or how to test SSR rendering locally.