Next.js 14 App Router - 将数据从客户端组件传递到服务器组件

Question

我有一个 next.js 项目，我在其中使用 App Router，其中包含 page.tsx 文件。它有API从数据库获取数据。

现在我有一个在此页面上使用的具有交互性的客户端组件。客户端可以填写表单或移动具有监听器的动画来更改请求数据。

我将请求数据推送到路由器，在 page.tsx 页面上，我根据查询参数再次调用 API。但现在随着用户更改动画，请求数据很大，所以我无法将数据传递到路由器。

我尝试将数据传递到本地存储，但无法从服务器组件访问本地存储。我尝试将数据从客户端传递到 cookie，但它说数据限制大小已增加。

next.js 中有什么方法可以将数据从客户端组件传递到服务器，以便服务器组件可以监视它并再次调用 API？

Answer 1

如果您需要为客户端和服务器组件存储数据，您应该使用cookie而不是本地存储。

可在服务器操作中使用。

https://nextjs.org/docs/app/api-reference/functions/cookies

Answer 2

遇到同样的问题。 在 NextJs 中创建一个 API 端点。然后在“使用客户端”组件内，向创建的 NextJs API 端点发出发布请求。这样您就可以将客户端组件数据获取到服务器组件。

在下面的示例中，我将表单数据发送到服务器组件。这样我们就可以将数据发送到服务器组件。使用next js响应和请求，我们可以双向传递数据。

app>login>page.tsx

"use client"

import { useRouter } from "next/navigation"

export default function TestLogin2() {

  const router = useRouter()

    const handleFormSubmit = async (formData : FormData) => {
        const res = await fetch('http://localhost:3000/api/login',{
            method: 'POST',
            body: formData
        })

        const ResponseData = await res.json()
        console.log(ResponseData)

        // YOU CAN USE RESPONSE DATA TO PASS SOME DATA BACK TO CLIENT COMPONENT. 
        // CAN USE USESTATE TO CHANGE UI USING FETCHED DATA

        if(ResponseData.redirect === true){
          router.push('/')
        }
    }

  return (
    <>  
        <form className="space-y-3" action={handleFormSubmit}>
                    .... 
        </form>       

        </>
  );
}

app>api>login>route.tsx

export async function POST(request : Request) {
    let formData = await request.formData()

    try {

        // ACCESS DATA FROM THE FORM

        const email = formData.get('email')
        const password = formData.get('password')

        const credentials = `Basic ${btoa(`${email}:${password}`)}`;

        // SENDING A REQUEST TO AN EXTERNAL API
        // YOU CAN DO YOUR THING HERE
       
        const response = await fetch(`http://localhost:8080/api/v1/log-in`, {
            method: 'POST',
            headers: {
                'Authorization': credentials,
            },
        });

        if (response.ok) {
            
            //get the response 
            const data = await response.json();

            // GET DATA FROM RESPONSE
            const userName = data.user_name;
            
            // SEND A RESPONSE BACK TO CLIENT
            const resData = {redirect : true}
            return new Response(JSON.stringify(resData))

        }
        else {
            // TODO : handle errors thrown by server side
            console.log(response.status)
            const resData = {redirect : false}
            return new Response(JSON.stringify(resData))
        }
    }
    catch (error) {
        console.log(error)
    }
}

这可能无法准确回答您的问题。但接受这个想法。这样您就可以使用请求将数据发送到作为路由的服务器组件。您可以使用响应将数据发送回客户端。

希望这对您有帮助。