Next.js SSR
Using the RuntimeHQ JS SDK with Next.js Server-Side Rendering
Next.js SSR Integration
For maximum SEO indexability and server rendering compatibility, fetch dynamic state on the backend inside pre-rendering paths. This allows you to intercept degraded states or outages securely before the page is ever delivered to the user's browser.
Server-Side State Fetching
import { RuntimeHQClient } from "@theruntimehq/js";
import { redirect } from "next/navigation";
// Initialize the client once outside the component
const client = new RuntimeHQClient({
runtimeKey: process.env.RUNTIMEHQ_RUNTIME_KEY!
});
export default async function TransfersPage() {
// Await the runtime payload server-side
const runtime = await client.getRuntime();
const transfersCapability = runtime.getCapabilityState('transfers');
if (transfersCapability?.state === "OUTAGE") {
// Intercept the request server-side and redirect to a safe fallback
redirect(`/outage?message=${encodeURIComponent(transfersCapability.message)}`);
}
return (
<main>
<h1>Transfer Funds</h1>
{/* Rest of the transfer application logic */}
</main>
);
}By keeping this logic in Server Components, you completely prevent layout shifts and flash-of-content issues during active incidents!