[ Next.js ] - error (feat. Server Components)

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

원인

Next.js의 경우 기본적으로 Server Components가 사용되는데, 이는 SSR(Server Side Rendering)즉 서버에서 렌더링 작업을 수행합니다. 

위와 같은 에러는 Server Components에서 createContext와 같은 Client Components에서 사용되는 기능을 사용하려 했기 때문에 발생한 에러이다. Server Components에서 Client Components에서 사용되는 기능을 사용하기 위해서는 해당 파일의 상단에 "use client"를 명시해줌으로써 해당 파일이 Server Components로 취급되지 않도록 하는 것입니다.

즉 위의 에러를 해결하기 위해서는 아래와 같이 파일의 상단에 "use client" 라고 명시해주면 됩니다.

---

Server Components

Server Components의 경우 서버에서 렌더링 작업을 수행합니다. Next.js의 경우 기본적으로 Server Components를 취하여 필요에 따라 Client Component를 사용할 수 있습니다. (즉 필요에 따라 클라이언트에서 렌더링되는 UI를 구현함을 의미합니다.) 

* Server Components에서 createContext, useState, useEffect와 같은 훅을 사용할 수 없습니다.

Client Componets를 사용하기 위해서는 위에서 언급한 것과 같이 "use client"를 파일 상단에 명시해주면 됩니다. "use client"는 Server Components와 Client Components를 구분하는데 사용됩니다. "use client"를 파일에 정의해준 경우, 해당 파일은 물론, 해당 파일에 속한 하위컴포넌트와, import 로 가져와서 사용한 모듈들 역시도 Client Componets 로 취급됩니다.

* RSC Payload(React Server Component)
서버에서 렌더링 작업 후 클러이언트로 전달하는 렌더링 된 서버 컴포넌트 트리의 압축된 바이너리 표현을 의미합니다. 즉 사용자의 브라우저에 사이트 화면을 출력하기 위해 서버에서 전달하는 데이터를 의미합니다.

Q) 사용자가 nextjs 기반의 사이트 방문 시 렌더링 과정?
사용자가 사이트 방문 시 해당 페이지에 대한 사용자의 요청이 서버로 전송 
-> 이후 서버에서 해당 페이지에 대한 데이터를 가져와 초기 렌더링을 수행
-> 서버에서 렌더링 된 HTML, CSS, 자바스크립트 번들을 클라이언트(= 웹 브라우저=사용자)로 전송
(서버에서 렌더링 할 때에 Server Component로 지정된 경우에 대해서만 렌더링 작업을 수행합니다.)

* 데이터 처리 등 백엔드 소스에 가까운 작업은 Server Components로, 사용자와의 상호작용이 필요한 부분은 Client Components로 구분함으로써 어플리케이션의 성능과 사용자 경험을 향상 시킬 수 있습니다. 
- Server Components의 경우 데이터 요청과 렌더링 모두 서버에서 이루어져 완전한 페이지가 사용자에게 출력되기 까지의 시간을 단축시켜 줍니다.

---

Server Components에서 유리한 작업

• 데이터 요청
• 백엔스 리소스에 접근
• 엑세스 토큰, API 키 등 민감 정보를 사용하는 작업

Client Components에서 유리한 작업

• useState, useEffect 등을 통한 상태 관리가 필요한 작업
• 브라우저에서만 사용되는 API 작업이 요구되는 경우

 

 

 

 

출처 

server components: https://nextjs.org/docs/app/building-your-application/rendering/server-components

client components: https://nextjs.org/docs/app/building-your-application/rendering/client-components