Next.js Discord

Discord Forum

How to use async/await in client components

Unanswered
Asian paper wasp posted this in #help-forum
Open in Discord
Asian paper waspOP
I am trying to add client side functionality to my SSR component but I get this error. What should I do, is there a workaround?

13 Replies

Asian paper waspOP
Code:
"use client";

import React from "react";
import getEntityPage from "./getEntityPage";
import Image from "next/image";

type Props = {
    entityType: string;
    entityId: string;
};

export default async function EntityPage(props: Props) {
    const { entityType, entityId } = props;

    const data = await getEntityPage(entityType, entityId);

    function showMoreButton(
        e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>
    ) {
        const { parentElement } = e.currentTarget;

        if (parentElement!.classList.contains("show-all")) {
            parentElement!.classList.remove("show-all");
        } else {
            parentElement!.classList.add("show-all");
        }
    }
Asian paper waspOP
Can you explain it a little more? @joulev
@Asian paper wasp Can you explain it a little more? <@484037068239142956>
I gave you a link to a message with a code example, follow it
Asian paper waspOP
Oh I didn't know it was a link, thanks
Is this something that will change? Because it says "async/await is not YET supported in Client Components"
@Asian paper wasp Is this something that will change? Because it says "async/await is not YET supported in Client Components"
I can’t say for sure whether it will change or not, but i personally cant imagine how a client async component can work
In normal circumstances
Though the react team has talked about potential usability of async client components in client-side routers
Asian paper waspOP
Hmm, is this problematic for SEO?
Because we are passing the data to a client side component
Client components are prerendered so SEO is fine
Asian paper waspOP
Ok thanks