页面呈现时，Clerk 组件加载速度比其他组件慢（NextJs 14）

Question

当页面加载时，与其他组件相比，诸如 或 之类的 clerk 组件需要更长的时间来渲染（NextJs 14）。我编码的方式是否存在问题导致了这个问题？

这是我当前代码的简化版本，有没有办法对其进行优化，以便同时渲染这些组件？任何见解表示赞赏！

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>
  );
}

Answer 1

您可以使用clerk提供的功能，而不是使用他们的组件。

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

从“@/components/auth/Signup”导入注册；

//从“@clerk/nextjs”导入{useSignUp}；来自cleark的钩子，它提供了使用注册功能 // const { isLoaded, signUp, setActive } = useSignUp();

导出默认函数 SignUpPage() { 返回 （ ）； }