Corbado cannot be rendered on the server-side when using the pages router. This page covers how you can integrate Corbado using lazy loading through next/dynamic.

​
How to lazy load Corbado

Lazy loading means our components will only be loaded once they are needed, after the initial page load. In general, this improves performance.

But it also prevents our components from being rendered on the server-side, which is currently only possible in the Next.js app router.

First create, your authentication component as the default export of a separate file. This may look something like this:

import { CorbadoAuth } from "@corbado/react";
import { useRouter } from "next/navigation";

export default function Authentication() {
    const router = useRouter();

    const onLoggedIn = () => {
        //post login actions can be performed here.
        router.push("/profile");
    };

    return <CorbadoAuth onLoggedIn={onLoggedIn} />;
}

You can now achieve lazy loading by importing your component using next/dynamic:

import dynamic from "next/dynamic";
const Auth = dynamic(() => import("./_components/auth"), {ssr: false});

export default function Home() {
    return (
        <Auth />
    );
}

You have to apply this pattern to every component that uses either Corbado components or hooks.

Corbado cannot be rendered on the server-side when using the pages router. This page covers how you can integrate Corbado using lazy loading through next/dynamic.

​
How to lazy load Corbado

Lazy loading means our components will only be loaded once they are needed, after the initial page load. In general, this improves performance.

But it also prevents our components from being rendered on the server-side, which is currently only possible in the Next.js app router.

First create, your authentication component as the default export of a separate file. This may look something like this:

import { CorbadoAuth } from "@corbado/react";
import { useRouter } from "next/navigation";

export default function Authentication() {
    const router = useRouter();

    const onLoggedIn = () => {
        //post login actions can be performed here.
        router.push("/profile");
    };

    return <CorbadoAuth onLoggedIn={onLoggedIn} />;
}

You can now achieve lazy loading by importing your component using next/dynamic:

import dynamic from "next/dynamic";
const Auth = dynamic(() => import("./_components/auth"), {ssr: false});

export default function Home() {
    return (
        <Auth />
    );
}

You have to apply this pattern to every component that uses either Corbado components or hooks.