Question 408076 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Clerk Components loads slower than others when page rendered (NextJs 14)

When page loads, clerk components such as or takes longer to be rendered as compared to other components (NextJs 14). Is there an issue in the way I am coding thats causing this problem?

Here is a simplified version of my current code, is there a way to optimise it such that those components are rendered at the same time? Any insights is appreciated!

import { Button } from "@/components/ui/button";
import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
import Link from "next/link";

export default async function Home() {
  return (
    <div>
      <SignedOut>
        <h1>Test</h1>
        <SignInButton>
          <Link href='/signin'>
            <Button className="mt-4">
              Sign in here
            </Button>
          </Link>
        </SignInButton>
      </SignedOut>
      <SignedIn>
          <UserButton />
          <h1>Hello, you are signed in</h1>
      </SignedIn>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    You can use the functions provided by clerk instead of using their components.

    import { LogoIcon } from "@/components/icons/SidebarIcons";

    import Signup from "@/components/auth/Signup";

    // import { useSignUp } from "@clerk/nextjs"; hook from cleark which gives use the signup function
    // const { isLoaded, signUp, setActive } = useSignUp();

    export default function SignUpPage() {
    return (

    );
    }

    Login or Signup to reply.
  2. 0

    Your code example does not contain any mistakes. When you use Clerk "control components" like <SignedOut> and <SignedIn> those components must be rendered client-side and must wait for the component logic to check the session data in the cookie attached to the request before either can render. Other parts of the page may be rendered server-side, thus they are visible much sooner. If you want the entire page to render at the same time you could use a Clerk hook like useAuth, which always returns an isLoaded property you can use to wait until it is true to render the entire page, but then your entire page will have a delay in rendering, which can make your app seem sluggish and is not good for SEO. The common solution to your issue is to instead render a loading indicator/spinner in place of the control components until isLoaded is true.

    https://clerk.com/docs/references/react/use-auth#how-to-use-the-use-auth-hook

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search