Error: async/await is not yet supported in Client Components in next.js

Question

I am using next.js on "next": "13.4.19". The project structure is:

--app 
  -- layout.tsx
  -- page.tsx
  -- [id]
    --page.tsx

in the [id]/page.tsx:

"use client"

import { Editor } from '@/components/editor';
import { useState, useRef, useEffect, useMemo } from 'react'

export default async function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  console.log('params.pipelineId',params.pipelineId);

  const [loding, setLoding] = useState(false);
  const [pipelineData, setPipelineData] = useState({});

  useEffect(() => {
    setLoding(true);
    let data = getPipeline(params.pipelineId);
    setPipelineData(data);
    setLoding(false);
  }, []);

  return (
    <div style={{ width: '100%', height: `calc(100vh - 65px)` }}>
      <Editor pipeline={pipeline} />
    </div>
  )
}

an error '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.' appears.

I found this page is being rendered in the server side, so I modified a bit

'user client'

import { Editor } from '@/components/editor';
import { getPipeline } from '@/lib/pipelines/storage';
import { useState, useRef, useEffect, useMemo } from 'react'

export default async function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  console.log('params.pipelineId',params.pipelineId);
  const pipeline = await getPipeline(params.pipelineId);
  
  const [loding, setLoding] = useState(false);
  useEffect(() => {
    console.log('useEffect');
    setLoding(true);
  }, []);

  return (
    <div style={{ width: '100%', height: `calc(100vh - 65px)` }}>
      <Editor pipeline={pipeline} />
    </div>
  )
}

it still doesn't work unless useEffect and useState is removed away.

Does it mean I can't use useState and useEffect in app->[id]->page.tsx, what about click, loading actions which needs to use useState and useEffect

Answer 1

I used to get the same error when I tried applying 'use client' for the whole page.

My solution is removing the async keyword. In this case, use:

export default function PipelineDesignerEditorPage

instead of:

export default async function PipelineDesignerEditorPage

Answer 2

You are mixing client and server components. As the error says, async/await is only supported in server component (without "use client"). But, as you mentioned, useState and useEffect (or events like click) etc... are only supported in client components.

The solution is to split the 2 in 2 different components. Typically the page.tsx would be a server component where you fetch data and pass those to a child client component as parameter(s) where you can have state and events if needed.

On a specific note, you probably should have state and effect in the Editor or look at Suspense. See example under https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example