Next.js 질문

SSR 렌더링을 활용하게 된다면 동적 기능 구현에 영향이 있을 수 있어, 상위 컴포넌트를 서버 사이드로 렌더링하고, 하위 컴포넌트를 클라이언트 사이드 렌더링으로 use client를 활용하여 동적 구현을 진행하는 방법이 있습니다. 말씀하신 것처럼 use client로 모두 처리하게 된다면 클라이언트 렌더링 처리로 SEO나 이런 것에 영향을 줄 수 있습니다. 꼭 필요한 페이지가 아니라면 그냥 use client로 처리하여도 문제 없지만, 서버 사이드 렌더링과 클라이언트 렌더링을 같이 혼용하여 사용이 필요할 경우, 컴포넌트를 분할하여 사용해야 합니다. 서버 사이드로 미리 렌더링이 가능한 요소는 페이지 상위 컴포넌트에서 작성하고, 상호작용 관련하여 클라이언트 컴포넌트로 처리가 되어야 하는 부분은 use client 처리가 된 컴포넌트를 불러와 적용하는 방법을 한번 찾아보시면 좋을 거 같습니다. 아래 코드는 Next14 기준으로 예전에 했던 내용을 조금 되짚어서 작성하였는데, 비슷하게 참고하시어 사용해 보시면 좋을 거 같아 한번 작성해 보았습니다. 완벽한 답변은 아닐 수 있지만, 도움이 되었으면 좋겠습니다 ..

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
import Component from "./component";

const Page = () => {
  // fetch ..
  return (
    <div>
      <Component />
    </div>
  )
}

// ./component
'use client'

const Component = () => {
  const onClick = () => {
    // 무언가 동작 ...
  }

  return (
    <div>
      <button onClick={onClick}>상호작용</button>
    </div>
  )
}