SSR Rendering 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.