개발자

Next.js 서버 컴포넌트와 클라이언트 컴포넌트 관련 질문입니다.

2023년 07월 31일조회 1,020

입사한지 얼마 안된 신입 프론트엔드 개발자입니다. 회사에서 Next.js를 사용하게 되어 개념을 공부중입니다. Next.js 12까지 사용되던 SSR과 CSR, SSG의 개념은 문서를 뒤져가며 어느정도 이해했다고 생각합니다. 하지만 이번에 Next.js 13 app dir에서 사용되는 서버 컴포넌트(RSC)와 클라이언트 컴포넌트의 개념을 구글링을 통해 며칠동안 알아봐도 이해가 안가는 부분이 많아 겉핥기식으로만 이해가 갑니다. 제가 앞으로 해야할 분야인데 아무리 문서랑 검색을 통해 정보를 찾아봐도 제대로 이해가 가지않아 질문 올려봅니다. 1. 서버 컴포넌트는 서버에서 렌더링이 된다고 이해했는데, 그렇다면 서버 컴포넌트는 db에 직접 접근할 수 있다는 점 외에 SSR과 어떤 차이점이 있는건가요? 2. Next.js13 app dir는 use client를 사용하지 않은 모든 페이지가 서버 컴포넌트라고 알고있는데, 그렇다면 기존 Next.js12에서 지원하던 SSG은 더이상 Next.js13에서 지원하지 않는 건가요? 아니면 서버 컴포넌트랑 SSG는 공존할 수 있는 개념인가요? 3. 기존 Next.js 12에서는 데이터를 fetching해오지 않는 정적인 페이지는 기본적으로 SSG로 작동한다고 알고있습니다. 그렇다면 Next.js 13에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이니 데이터를 fetching하지 않는 페이지도 서버에서 렌더링이 되는건가요? 4. 클라이언트 컴포넌트에서 서버 컴포넌트를 import해 사용할 수 없다는데.. 저는 잘만 됩니다. 여기서 서버 컴포넌트는 클라이언트 컴포넌트가 된 건가요? 5. 서버 컴포넌트도 SSR처럼 브라우저에서 해당 페이지를 접속했을 때 렌더링이 되고 클라이언트에 내려오나요? 아직 Next.js 이해도가 낮아 질문이 이상할 수 있습니다. 양해 부탁드립니다. 이게 이해가 안가서 스트레스를 너무 받고있네요.. 도와주세요

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

이준혁님의 프로필 사진

1. 이 글 한번 정독을 권합니다. https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0 2. SSG도 Next App Route에서 지원 됩니다. 대부분 SSG로 껍데기를 만들고(메타태그 넣기 위해..), 내부는 CSR로 구현합니다. 3. 모든 컴포넌트가 서버 컴포넌트인게 아니라, 기본값이 서버 컴포넌트인겁니다. use client 이하는 클라이언트 컴포넌트가 됩니다. 4. 이거 좀 복잡한 부분인데요, 공식문서에 따르면.. https://nextjs.org/docs/getting-started/react-essentials#server-components “You cannot import a Server Component into a Client Component:” 서버 컴포넌트를 클라이언트 컴포넌트에 임포트하는건 불가능합니다. 단, children 형태로 넣는건 됩니다. 아래에 붙여넣은 코드를 참고해보세요. 본인이 import 한게 서버 컴포넌트가 아닐 수도 있습니다. 5번은 잘 모르겠네요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'use client'
 
// This pattern will **not** work!
// You cannot import a Server Component into a Client Component.
import ExampleServerComponent from './example-server-component' <-- 불가능
 
export default function ExampleClientComponent() {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
       <ExampleServerComponent /> <-- 불가능
    </>
  )
}



'use client'
 
import { useState } from 'react'
 
export default function ExampleClientComponent({
  children,
	fuck,
}: {
  children: React.ReactNode;
	fuck: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
       {children} <-- 이럼 가능
       {fuck} <-- 안될거 없음
    </>
  )
}

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!