Rendering Taking around 1 hour on GCP Cloud for 19 second Video.

[muneebable]

This is my main REMOTION Logic. I checked with CLI Command and it tokk around 4 minutes, and I think it is still long for 19 second render. but when i do the request with Node its just keep rendreing.

Can anyone point me in the right direction, how can i find the pain point?

//--- Main Remotion Component Logic --- 
const MainVideoComponent: React.FC<VideoProps> = ({ videoData, frameList, isCurrentUserPremium }) => {
    const { fps, durationInFrames: compositionDuration } = useVideoConfig();
    const currentFrame = useCurrentFrame();

    // --- Extract data ---
    const teaserSettings = videoData.teaserSettings;
    const introImages = videoData.images ?? [];
    const introImageCount = introImages.length;
    const subtitleSettings = videoData.subtitleSettings;
    const showSubtitles = subtitleSettings?.showSubtitles ?? true;
    const showEmojis = subtitleSettings?.showEmojis ?? true;

    // --- Calculate Intro Duration --- 
    const DURATION_PER_INTRO_IMAGE_FPS = 1 * fps;
    const calculatedIntroDuration = Math.min(
        introImageCount * DURATION_PER_INTRO_IMAGE_FPS,
        compositionDuration
    );
    const shouldRenderIntro = introImageCount > 0 && teaserSettings?.showTeaser && calculatedIntroDuration > 0;
    const mainSequenceStartFrame = shouldRenderIntro ? calculatedIntroDuration : 0;

    // --- Calculate Content Duration --- 
    const contentEndTime = frameList.length > 0 ? frameList[frameList.length - 1].end : 0;
    const contentDurationFrames = Math.ceil(contentEndTime * fps);

    return (
        <AbsoluteFill style={{ backgroundColor: 'black' }}>
            {/* --- Intro Sequence --- */}
            {shouldRenderIntro && (
                <Sequence from={0} durationInFrames={calculatedIntroDuration}>
                    <IntroSequence images={introImages} teaserSettings={teaserSettings} />
                </Sequence>
            )}

            {/* --- Main Content Sequence --- */}
            <Sequence from={mainSequenceStartFrame} durationInFrames={contentDurationFrames + fps}>
                <AbsoluteFill>
                    {frameList.map((sceneFrame, index) => {
                        const relativeStartFrame = Math.max(0, Math.round(sceneFrame.time * fps));
                        const durationInFrames = Math.max(1, Math.round(sceneFrame.duration * fps));
                        const absoluteImageStartFrame = mainSequenceStartFrame + relativeStartFrame;

                        if (isNaN(relativeStartFrame) || isNaN(durationInFrames)) {
                            console.error(`[NaN Detected] Skipping frame ${index}.`);
                            return null;
                        }

                        const scale = interpolate(
                          currentFrame,
                          // Interpolate based on absolute frame position in the overall composition
                          [absoluteImageStartFrame, absoluteImageStartFrame + durationInFrames / 2, absoluteImageStartFrame + durationInFrames],
                          index % 2 === 0 ? [1, 1.05, 1] : [1.05, 1, 1.05], // Subtle zoom/pan
                          {
                              extrapolateLeft: 'clamp',
                              extrapolateRight: 'clamp',
                          }
                      );

                        return (
                            <Sequence key={sceneFrame.id} from={relativeStartFrame} durationInFrames={durationInFrames}>
                                <AbsoluteFill>
                                    <Img
                                        src={sceneFrame.image}
                                        alt={`Scene ${sceneFrame.id}`}
                                        onError={(e) => {
                                          console.error(`Failed to load image: ${sceneFrame.image}`);
                                        }}
                                        style={{
                                            width: '100%',
                                            height: '100%',
                                            objectFit: 'cover',
                                            transform: `scale(${scale})`,
                                        }}
                                    />
                                </AbsoluteFill>
                            </Sequence>
                        );
                    })}
                    {/* --- Render Subtitles --- */}
                    {showSubtitles && videoData?.captions && (
                        <ProjectSubtitleRenderer
                            captions={videoData.captions}
                            subtitlePresetId={subtitleSettings?.presetId ?? 1}
                            styleOverrides={subtitleSettings}
                            showSubtitles={showSubtitles}
                            showEmojis={showEmojis}
                        />
                    )}
                    {/* Audio */}
                    {videoData?.AudioUrl && <Audio src={videoData.AudioUrl} />}
                    {/* Watermark */}
                    {!isCurrentUserPremium && <Watermark />}
                </AbsoluteFill>
            </Sequence>
        </AbsoluteFill>
    );
};

// RENDER VIDEO WITH CLOUD RUN
      const renderResult = await step.run("render-video-cloudrun", async () => {
        console.log(`[Inngest] Starting Remotion render for download ${renderId} on service ${serviceName}`);
        // Cast to 'any' to bypass strict type check for the 'type' property
        return await renderMediaOnCloudrun({
          serviceName,
          region: 'us-east1',
          serveUrl: process.env.REMOTION_GCP_SERVE_URL as string,
          composition: 'MainExportVideo',
          codec: 'h264',
          inputProps: {
            videoData: videoData,
            frameList: frameList,
            isCurrentUserPremium: isPremium,
          },
        } as any);
      });

`

[adityapratap0077-cloud]

I render Remotion on a small cloud VM too and had the same split: CLI finishes, the Node API call hangs forever. A few things worth checking, roughly in the order they bit me:

1. Find the frame where it stalls first
Add an onProgress callback (or run the API render with verbose logging) and watch which frame it stops advancing on. A hang is usually one frame, not the whole render. If it always dies at the same frame, look at what that frame loads: in your component the images come from videoData, and if those are remote URLs, the browser fetches them during the render. One slow or blocked request plus delayRender will wait forever instead of failing. Pre-downloading the assets and passing local paths (staticFile()) removed this class of hang for me completely. Also set a timeoutInMilliseconds on the render so a stuck asset fails loudly instead of hanging silently.

2. Check your temp disk
Remotion and Chrome write a lot of temp files while rendering. On small GCP instances the temp space can be tiny, and when it fills up the render does not crash, it just crawls or stalls. I hit this with a 512MB /tmp: renders died or froze until I pointed TMPDIR at a large disk-backed directory. Watch disk usage during a render before tuning anything else.

3. Set concurrency explicitly
On a 2-core box the default can thrash. Try concurrency: 2 (or "50%") in renderMedia() and compare. Too high on a small instance is slower than too low.

4. Video inputs and frame format
If any source clips come in through <Video>, switch to <OffthreadVideo> for rendering, seeking in a playing video is a classic stall. And if you are rendering PNG frames, try imageFormat: "jpeg", it is noticeably faster.

Quick way to isolate: run the CLI with the exact same props (--props) and --log=verbose. If the CLI stays at 4 minutes while the API hangs, the difference is almost always asset fetching or temp space in the server environment, not your composition.