개발자

Next.js 질문

2024년 05월 24일조회 70

아직 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 기준으로 예전에 했던 내용을 조금 되짚어서 작성하였는데, 비슷하게 참고하시어 사용해 보시면 좋을 거 같아 한번 작성해 보았습니다. 완벽한 답변은 아닐 수 있지만, 도움이 되었으면 좋겠습니다 ..

1import Component from "./component";
2
3const Page = () => {
4  // fetch ..
5  return (
6    <div>
7      <Component />
8    </div>
9  )
10}
11
12// ./component
13'use client'
14
15const Component = () => {
16  const onClick = () => {
17    // 무언가 동작 ...
18  }
19
20  return (
21    <div>
22      <button onClick={onClick}>상호작용</button>
23    </div>
24  )
25}

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

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

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 05월 24일

Next.js는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)을 둘 다 지원하는 프레임워크입니다. getStaticProps와 getServerSideProps는 Next.js에서 제공하는 서버 사이드 렌더링(SSR)과 관련된 함수들입니다. getStaticProps는 빌드 시에 데이터를 가져와서 HTML을 생성하고, 이를 사용하여 페이지를 미리 생성합니다. 반면에, getServerSideProps는 매 요청시마다 서버에서 데이터를 가져와 페이지를 생성합니다. react-query 및 pagination 등의 기능은 CSR 방식으로 처리되곤 하며, 이 경우 컴포넌트가 마운트 되었을 때 (즉, 클라이언트 측에서) API 호출이 발생합니다. 이 경우에는 CSR의 특성을 가지게 됩니다. 그러나 이것이 일관되게 SSR의 장점들을 상실했다고 보기는 어렵습니다. 페이지의 일부 컨텐츠가 CSR에 의해 제공되어도, 여전히 SSR로 제공되는 사전 렌더링 페이지의 장점은 유지됩니다. 예를 들어, 초기 로딩 성능 개선, SEO 최적화 등이 있습니다. 사용자 환경 및 요구사항에 따라 필요한 데이터 가져오기 전략(getServerSideProps vs getStaticProps vs CSR)을 선택할 수 있으며 필요한 경우 이 세 가지 방법을 혼합해서 사용하는 것도 가능합니다. 즉, Next.js는 이러한 유연성을 제공하므로 필요에 따라 가장 최적의 접근 방식을 선택할 수 있으며, 이는 주어진 상황에 따라 다릅니다. 각 페이지나 컴포넌트에서 필요한 데이터를 어떻게 가져올지, 그리고 언제 렌더링할 지 결정하여 유기적으로 적용하면 됩니다.

목록으로

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