Server and build integration

Install the published package

Use the compiled SDK in a project that renders HTML on the server or during a build. A browser-only React app needs prerendering or a compatible edge delivery path to put footer links in its initial response.

npm install https://app.1footer.com/downloads/onefooter-react-2.0.0.tgz

Next.js Server Component

Render OneFooter from a Server Component. Supply your public website ID and domain, or keep a workspace API key in a server environment variable. Pass the current request pathname when using page targeting; a shared layout must receive reliable route data from your application.

import { OneFooter } from 'onefooter-react';

export function SiteFooter({ pathname }: { pathname: string }) {
  return <OneFooter
    websiteId="YOUR_WEBSITE_ID"
    domain="example.com"
    path={pathname}
    fallback={<footer>Existing navigation</footer>}
  />;
}

Other React server and build loaders

In TanStack Start, Remix or another React server-rendered application, run loadOneFooter in a server loader or build step. Pass its result to the page and hydrate with that same artifact. With Astro, use a server/build integration and include both the footer HTML and CSS in the generated document.

Update the artifact with the current pathname on navigation. A once-loaded shared layout can otherwise leave a footer on an excluded page.

// Server loader or build step:
import { loadOneFooter } from 'onefooter-react/server';
const artifact = await loadOneFooter({
  websiteId: 'YOUR_WEBSITE_ID',
  domain: 'example.com',
  path: requestPathname,
});

// Render using the artifact returned by that loader:
import { OneFooterClient } from 'onefooter-react/client';
<OneFooterClient
  artifact={artifact}
  fallback={<footer>Existing navigation</footer>}
/>

Handle unavailable and intentionally empty output

The SDK loader uses a three-second request deadline and defaults to a 60-second framework revalidation hint. Honor your framework’s cache behavior and republish static snapshots after content or targeting changes.

• null means the loader could not obtain an artifact. Keep local navigation or a last successful artifact for the same website and allowed route.
• An artifact with empty html and css means paused or excluded delivery. Keep it empty; do not restore a previous footer as a fallback.
• Render the artifact once in the shared page structure. Avoid leaving a legacy 1Footer embed beside it.

Verify the deployed document

A successful SDK installation does not enable automatic migration repair on every host. Use the support matrix to check the released managed adapters.

• Check real footer anchors and CSS in the public initial HTML.
• Compare link labels and destinations with the published workspace footer.
• Check a real included page, excluded page and navigation between them.
• Check pause/resume and confirm one usable footer on desktop and mobile.