Prerender ready signal

When you need this#

Most sites don't need this. Encited'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:

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

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

Example in a React component:

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

Example with async data fetching:

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

TypeScript support#

Add these type declarations to avoid TypeScript errors:

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