当前位置：首页 > article >正文

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

article 2024/9/21 5:33:42

在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即可。

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

查看全文

http://www.kler.cn/news/305571.html