Programmatically signal a page is ready for prerendering

Tell LovableHTML to wait for your async content before capturing the HTML snapshot.

When you need this

Most sites don't need this. LovableHTML's prerendering engine has smart defaults that work for 99% of cases — it waits for network requests to settle and the page to stabilize.

However, if you have very slow async content (API calls that take 5+ seconds, lazy-loaded data, etc.), you may notice that rendered pages are missing some content. In that case, you can manually signal when your page is ready.

How to implement

Set a global flag when your critical content has finished loading:

language-javascript.javascript

CopyDownload

// Option 1: Set prerenderReady
window.prerenderReady = true;

// Option 2: Set htmlSnapshot (alternative)
window.htmlSnapshot = true;

Example in a React component:

language-javascript.javascript

CopyDownload

useEffect(() => {
  if (dataLoaded && !isLoading) {
    // Signal that the page is ready for prerendering
    window.prerenderReady = true;
  }
}, [dataLoaded, isLoading]);

Example with async data fetching:

language-javascript.javascript

CopyDownload

async function loadPageData() {
  try {
    const data = await fetchSlowAPI();
    setData(data);
  } finally {
    // Always signal ready, even on error
    // to prevent infinite wait
    window.prerenderReady = true;
  }
}

Important: Always ensure the flag gets set, even if your data fetch fails. Otherwise, the prerender will timeout waiting indefinitely.

TypeScript support

Add these type declarations to avoid TypeScript errors:

language-typescript.typescript

CopyDownload

// In a .d.ts file or at the top of your file
declare global {
  interface Window {
    prerenderReady?: boolean;
    htmlSnapshot?: boolean;
  }
}

Tip: Only use this if you notice content missing in your prerendered pages. Adding unnecessary delays can slow down your cache warm-up process.