[트러블 슈팅] async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

문제

Next를 사용해서 개발을 하던 중
async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding use client to a module that was originally written for the server. 해당 오류가 발생했다.

async 함수는 서버 컴포넌트에서만 사용이 가능하며
클라이언트 컴포넌트에서 사용해서 해당 오류가 발생한 것이었다.

---

코드 살펴보기

export default async function Home() {
  const posts = await getPosts();

처음 오류가 났던 코드이다.
다른 곳에서 데이터를 가져오는 로직인 getPosts()를 만들었고
async/await를 사용해서 비동기 로직으로 작업하고자 하였으나
위의 오류가 발생했다.

---

문제 해결하기

1. 서버 컴포넌트로 변경

우선 가장 먼저 든 생각은 기존 클라이언트 컴포넌트를
서버 컴포넌트로 변경하여 오류를 해결하는 것이었다.
오류 문장에도 나와 있어 가장 간단한 방법이라고 생각했으나

해당 페이지는 첫 페이지이자 메인 페이지로
SSR을 적용하면 요청 시마다 html을 생성해야 하기 때문에
서버 부하로 성능이 저하될 거 같아 이 방법은 패스했다.

2. props로 데이터 받기

해당 문제를 구글링하자 가장 많이 나온 해결방법이었다.

export default function Home({ posts }: { posts: PostListProps[] }) {
}

export const getServerSideProps: GetServerSideProps = async () => {
  const posts = await getPosts();
  return {
    props: {
      posts,
    },
  };
};

SSR 방식을 적용하면서 props로 전달받는 이 방식은
서버에서 데이터를 가져와 페이지로 전달하면서 SEO 최적화와 최신 데이터 유지가 가능하다는 장점이 있다고 한다!!

만약 이 방법을 사용하지 않는다면 useState + useEffect훅을 사용하느
CSR 방식인데 이 방법은 Next.js의 장점 중 하나인 SEO 최적화하는 못하는 방식이기 때문에 SSR을 사용하는 방식이 효율적이라고 생각했다.

---

Next.js가 클라이언트 컴포넌트에서 async 함수를 사용하지 못하는 이유

가장 큰 이유는 렌더링 방식 때문이다.
Next.js는 React에서 파생된 것으로 React의 렌더링 방식인
동기적 렌더링 을 따르는데 async 함수를 사용하면 렌더링이
비동기적으로 지연될 수 있어 Next.js에서 막는다고 한다.

그렇기 때문에 만약 클라이언트 컴포넌트에서 데이터를 비동기적으로 가져오려면 렌더링을 마치고 데이터를 가져오는 useState + useEffect훅을 사용해야 한다고 한다.