服务器组件

服务器操作是在服务器上执行的异步函数,可以在服务器和客户端组件中使用,以处理Next.js应用中的表单提交和数据变化。

可以使用use server指令定义服务器操作,例如可以将该指令放置在async函数的顶部以将该函数标记为服务器操作,或者放置在单独文件的顶部以将该文件的所有导出函数标记为服务器操作。

pad image

服务器组件内联服务器操作

    //服务器组件
    export default function Page(){
        //服务器操作
        async function create(){
            'use server'
            //...
        }

        return (
            //...
        );
    }

客户端组件中调用服务器操作

客户端组件只能导入使用模块级use server指令的操作。要在客户端组件中调用服务器操作,请创建一个新文件并在其顶部添加'use server指令,这样文件中所有函数将被标记为服务器操作,可以在客户端和服务器组件中重用:

// /app/actions/index.ts
'use server'

export async function create(){
    //...
}

export async function delete(){
    //....
}

还可以将服务器操作作为属性传递给客户端组件:

// ServerComponent
export default function EditPage(){
    async function updatePage(id,content){
        'use server';
        //...
    }

    return(
        <ClientEditForm onSubmit={updatePage} />
    )
}

//ClientComponent
'use client'

export default function ClientEditForm({updatePage}){
    return <form action={updatePage} >

            </form>
}

客户端组件使用<form>元素的action属性来调用服务器操作即使JavaScript尚未加载或被禁用,表单也会被提交。