Chapter 154: Rendering using SSR APIs

Core Idea

The NPM package @remotion/renderer provides you with "Server-Side Rendering" APIs for rendering media programmatically. These functions can be used in Node.

Key Concepts

• Example script
• Linux Dependencies
• SSR APIs in Next.js
• See also

Code Examples

// The composition you want to render
const compositionId = 'HelloWorld';

// You only have to create a bundle once, and you may reuse it
// for multiple renders that you can parametrize using input props.
const bundleLocation = await bundle({
  entryPoint: path.resolve('./src/index.ts'),
  // If you have a webpack override in remotion.config.ts, pass it here as well.
  webpackOverride: (config) => config,
});

// Parametrize the video by passing props to your component.
const inputProps = {
  foo: 'bar',
};

// Get the composition you want to render. Pass `inputProps` if you
// want to customize the duration or other metadata.
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: compositionId,
  inputProps,
});

// Render the video. Pass the same `inputProps` again
// if your video is parametrized with data.
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});

console.log('Render done!');

• What it demonstrates: Usage pattern for Rendering using SSR APIs from the official docs.

Key Takeaways

1. Understand example script when working with Rendering using SSR APIs.
2. Understand linux dependencies when working with Rendering using SSR APIs.
3. Understand ssr apis in next.js when working with Rendering using SSR APIs.
4. Understand see also when working with Rendering using SSR APIs.

Connects To

• Chromium Flags: related page in the Rendering & SSR section.
• Compare ssr: related page in the Rendering & SSR section.
• Dataset Render: related page in the Rendering & SSR section.