Next.js 14 如何在服务端页面中使用客户端渲染组件

在Next.js中，默认就是使用服务端渲染的，那如何在服务端页面中包含客户端组件呢，以下是试例：

在ArticlePage.js中：

import DeleteButton from '@/components/DeleteBtn'export default async function ArticlePage(){return (<div><DeleteButton/></div>)
}

在DeleteButton.js中：

"use client"export default function DeleteButton({id}){const click = async (articleId) => {此处省略...}return  (<button onClick={() => click(id)}>删除</button>)
}

我在ArticlePage页面（是跑在服务器上）中引用了DeleteButton，而DeleteButton是以"use client"开头的，所以把你页面中需要用"use client"的部分做成一个组件，在服务端页面中import即可。

这种做法有什么问题，我有点担心，但目前确实没有报错，如有问题请大佬指点。