CODEWITHSUNDEEP
next.jsnext.js13next.js14
marius
marius

Reputation: 1266

nextjs 13/14 server component data into client component

I have a client component and i want to load in data from a server component, using useEffect and useState it works fine, however it is not working usine the "use" hook (which should resolve a promise).

This is my server component:

'use server' import { connect } from "@/lib/Database/Database";

export type ActiveType = "home" | "history" | "profile"

export async function getBottomMenuData(): Promise<ActiveType> {
    await connect()
    // const url = new URL(headers().get('x-url')!);
    // const searchParams = url.searchParams;
    // return searchParams.toString()
    return "home" }

and this is the client component that works

"use client"
import classNames from "classnames"
import styles from "./BottomMenu.module.css"
import { ActiveType, getBottomMenuData } from "./BottomMenuData";
import { useEffect, useState } from "react";

export function BottomMenu() {
    const [active, setActive] = useState<ActiveType | undefined>()
    useEffect(() => {
        getBottomMenuData().then(r => setActive(r))
    }, [])
    return <div>Test</div>
}

and this is the client component that DOES NOT work

"use client"
import classNames from "classnames"
import styles from "./BottomMenu.module.css"
import { ActiveType, getBottomMenuData } from "./BottomMenuData";
import {use, useEffect, useState } from "react";

export function BottomMenu() {
    const active = use(getBottomMenuData())
    return <div>Test</div>
}

The error resulting is

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

The "use" hook should do exactly the same..

Upvotes: 1

Views: 130

Answers (1)

John Dennehy
John Dennehy

Reputation: 324

I think the issue might be using 'getBottomMenuData' in a client side component, as it doesn't have access to it. I believe you need to pass it as a prop instead of importing it.

Upvotes: 0

Related Questions