服务器操作 nextJS 期间客户端组件中的骨架

Question

我有一个调用服务器操作的客户端组件。服务器操作会返回一些内容，并且 UI 会相应更新。请参阅下面的代码

export default function FormHome() {
  const [open, setOpen] = React.useState(false);
  const [source, setSource] = useState("");

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      ... various values ...
    },
  });

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    const imageStringify = await requestImg(data);
    const binaryData = Buffer.from(imageStringify.image);

    const imageBase64 = URL.createObjectURL(
      new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */)
    );
    setOpen(true);
    setSource(imageBase64);
  }

    return (
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-2/3 space-y-6"
        >

其中

await requestImg(data);

是服务器操作。现在，我的服务器操作需要几秒钟，因此在执行时，UI 似乎被阻止了。

我已经阅读了关于骨架加载的NextJS 文档，但它似乎只有在有服务器客户端时才有效。就我而言，它是一个服务器组件，UI 不会更新。

有没有办法将它与客户端组件一起使用？

Answer 1

您是否尝试删除所有异步/等待并仅使用

.then()

？值得一试IMO