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.
There are two functions,
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
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:
localStorageAPI 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.
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.
delayRender() to calculate video metadata#
You can also customize duration, frame rate and dimensions based on asynchronous data fetching: