서버컴포넌트2 [Next.js 13] Server Component vs. Client Component 기본 및 사용 방법 # Server Component vs. Client Component 기본 Next.js 13에서는 Server Component와 Client Component를 개발자가 선택적으로 정의하여 사용할 수 있다. 이에 대한 기본적인 이해를 위해 렌더링부터 가볍게 정리해본다. # 렌더링(Rendring)이란? 렌더링이란 결국 코드를 UI로 만드는 것을 의미한다. 따라서 React에서의 렌더링은 React Component를 HTML 로 만드는 과정이다. # React 18 이전의 렌더링 1. CSR (Client Side Rendering) React 18이 나오기 전, 리액트 컴포넌트의 모든 렌더링은 클라이언트(브라우저)에서 이루어졌다. - 서버는 React로 작성한 JS 코드 뭉텅이들을 브라우저에 응답.. 2023. 8. 21. [Next.js 13] async 서버 컴포넌트 JSX/Promise 반환 에러 해결 방법 # Async 서버 컴포넌트 Promise 반환 이슈 Next.js13에서 Data Fetching 등을 위해 async 함수 형태의 Server Component 를 사용하면 아래와 같은 에러가 뜰 때가 있다. 'ServerComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) # 원인 Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환한다. React .. 2023. 5. 12. 이전 1 다음
