개발자

Next.js 질문

2024년 05월 24일조회 68

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

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

답변 1

소지우님의 프로필 사진

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>
  )
}

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

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

또는

이미 회원이신가요?

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

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

새로운 질문 올리기

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