#client-component

질문 4
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

일 년 전 · 익명 님의 새로운 댓글

Nextjs App router 동작 방식이 이해가 안됩니다.

https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

개발자

#next.js

#react

#ssr

#csr

#server-component

답변 1

댓글 1

조회 215

2년 전 · 손정현 님의 답변 업데이트

next.js getServerSideProps와 서버 컴포넌트

next.js에서 새롭게 선보인 서버 컴포넌트를 공부하다가 생긴 질문 남겨봅니다! 기존에는 SSR을 구현할때 getServerSideProps를 통해서 페이지에 필요한 정보를 내려주고 있었는데요. 이렇게 getServerSideProps에 구현된 로직을 서버 컴포넌트로 바꿔야하는 것인지 궁금합니다. 서버 컴포넌트도 서버에서만 돌아가는 코드니까 getServerSideProps가 하던 역할을 쪼개서 하는건가 싶어서요. (https://beta.nextjs.org/docs/rendering/server-and-client-components)

개발자

#react

#next.js

답변 1

댓글 0

추천해요 1

조회 302