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

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} <-- 안될거 없음
    </>
  )
}