Next.js 프로젝트를 하고 있는 중에
async키워드와 'use client' 를 같이 쓰니 에러가 났다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링 때문에 생긴 오류라고 생각이 된다.
그래서 찾아보았다!!
언제 서버 컴포넌트, 클라이언트 컴포넌트를 쓰는 것 일까?
공식문서에 따르면 Fetch data는 서버 컴포넌트
내가 해당 컴포넌트에서 쓰려고 했던 Event Listeners와 Lifecycle Effects은 클라이언트 컴포넌트라고 해서 생긴 오류였다.
해결방법
일단 내가 해결한 방법은
상위 컴포넌트에서 Fetch Data를 해서 하위 컴포넌트에 props로 넘겨줬다.
근데 찾아보니까
children을 이용한 방법이 있었다.
한번 적용해봐야겠다.
Configuring: TypeScript | Next.js
Next.js provides a TypeScript-first development experience for building your React application. It comes with built-in TypeScript support for automatically installing the necessary packages and configuring the proper settings. 🎥 Watch: Learn about the b
nextjs.org
How to import async Server Components into Client Components in Nextjs 13?
I am experimenting with Next.js 13 app directory and React 18's Server Components. Following the documentation I put an async fetch() call inside a Server Component and I mark the component as asyn...
stackoverflow.com
'Frontend > Next.js' 카테고리의 다른 글
| NextAuth 사용해서 Github 로그인 구현하기 (0) | 2023.11.24 |
|---|---|
| Route Groups에 대해서 (2) | 2023.11.15 |