Data fetching

One of the most groundbreaking things about Remotion is that you can fetch data from an API to display in your video like you would in a regular React project. It works almost like you are used to: You can use the fetch API to load the data in a useEffect and set a state.

Telling Remotion to wait until the data is loaded#

There are two functions, delayRender and continueRender, which you can use to tell Remotion to not yet render the frame. If you want to asynchronously render a frame, you should call delayRender() as soon as possible, before the window onload event is fired. The function returns a handle that you need to give Remotion the green light to render later using continueRender().

import {useEffect, useState} from 'react';
import {continueRender, delayRender} from 'remotion';
const handle = delayRender();
export const MyVideo = () => {
const [data, setData] = useState(null);
const fetchData = async () => {
const response = await fetch('http://example.com/api');
const json = await response.json();
setData(json);
continueRender(handle);
}
useEffect(() => {
fetchData();
}, []);
return (
<div>
{data ? (
<div>This video has data from an API! {JSON.stringify(data)}</div>
) : null}
</div>
);
}

Caching#

It is important to know that in the render process, data fetching works on a per-frame basis, so for every frame, the page gets fully reloaded and screenshotted. You should consider caching the result of your API, to avoid rate-limits and also to speed up the render of your video. We have two suggestions on how to do that:

  • Use the localStorage API to persist data after a network request and make a request only if the local storage is empty.

  • Fetch the data before the render, and store it as a JSON file, then import this JSON file.

Time limit#

You need to clear all handles created by delayRender within 30 seconds after the page is opened. This limit is imposed by Puppeteer, but makes a lot of sense as going over this limit would make the rendering process massively slow.

See also#