개발자
nextjs 서버컴포넌트 질문있습니다 !
안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!
답변 1
1. children(props)을 사용해 쓰면 기본 값인 서버 컴포넌트입니다. 그 외에 자식 컴포넌트를 import하여 그대로 jsx를 쓰게 된다면 클라이언트 컴포넌트가 됩니다. 2. 아닙니다. 3. 서버컴포넌트 => 리액트 컴포넌트 + 서버쪽 기능(직접 접근 가능) SSR => 서버에서 웹 사이트를 만들어 내는 동작이나 방법론 그 자체를 의미하는 말
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 08월 29일
안녕하세요! 훌륭한 질문들을 주셔서 감사합니다. 다음과 같이 답변 드리겠습니다. 1. Next.js에서 서버 컴포넌트를 클라이언트 컴포넌트로 가져오면 일반적으로 서버 컴포넌트의 모든 자식 컴포넌트도 서버에서 실행됩니다. 하지만 'use client'를 명시하면 그 아래의 모든 컴포넌트는 클라이언트에서 동작합니다. 이는 클라이언트와 서버 사이에서 상태 공유가 필요 없고 빠른 상호작용을 할 수 있도록 설계된 메커니즘입니다. 2. 예, 맞습니다. layout 단에서 'use client'를 지정한 경우, 그 아래의 모든 자식들은 클라이언트 컴포넌트가 됩니다. 3. SSR(Server-Side Rendering)은 초기 페이지 로딩 시, 서버에서 렌더링하여 HTML을 반환하는 방법입니다. 반면에, 서버 컴포넌트는 요청에 따라 실시간으로 렌더링되며, 클라이언트에게 전달되기 위해 HTML 형태로 치환되지 않습니다. 대신 데이터만 전달되어 클라이언트에서 최종적으로 렌더링됩니다. 이런 차이로 인해 서버 컴포넌트는 SSR에 비해 트래픽을 줄이고, 빠르게 상호작용할 수 있습니다. 계속해서 좋은 질문들을 주셔서 감사합니다! 추가적인 궁금증이 생기시면 언제든지 질문주세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!