-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
수업을 듣다가 SSR에 관하여..
23.10.24 19:50 작성 23.10.24 19:56 수정 조회수 268
1
안녕하세요, 실무에서 next.js를 이번에 사용할려고 강의를 듣고있습니다.
강의 초반부에 SSR의 경우 (getServerSideProps) API 응답 속도에 따라 렌더가 되지않아 가급적 자제하라고 본 것 같은데,
실무에선 사실 컴포넌트 내에서 API요청량이 많을텐데 보통 어떤식으로 구현하시는지 궁금합니다
보통 getServerSideProps 에서 API 통신을 하고 props로 넘겨줘서 쓰는지 ? 아니면 CSR방식으로 일반 컴포넌트 내에서 API통신을 하는지 ? 도 궁금합니다.
2번 질문에서 CSR방식으로 컴포넌트 내에서 API통신을 한다면 next.js를 쓰는 장점은 비동기 데이터 dom들을 제외한 html을 서버에서 렌더링해준다는게 장점일까여?
답변을 작성해보세요.
1
박용주
지식공유자2023.10.28
안녕하세요 질문 감사합니다. 해외에 있어 답변이 조금 늦었습니다ㅠㅠ
평소 리액트 개발하시는 것과 비슷하게 구현하시면 됩니다. (컴포넌트에서 ajax 호출 / react-query 사용 등등). 다만 가장 최신의 Next.js 버전의 경우 Server Components 라는 새로운 기능을 도입하여 강의에서 언급한 SSR의 단점을 보완하고 있습니다. 강의 범위 밖의 내용이라 관련 링크만 남겨드리지만, 추후에 학습하면 도움이 되실 것 같습니다! (https://nextjs.org/docs/app/building-your-application/rendering/server-components)
프로젝트마다 사용해야하는 렌더링 방식이 다르기 때문에 정해진 답은 없지만, 일반적인 경우라면 CSR 방식이 더 편할 것 같습니다. SSR/SSG/CSR에 관련된 앞선 질문들도 링크 첨부합니다ㅎㅎ
(https://www.inflearn.com/questions/947345/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EC%A7%80-%EA%B5%AC%ED%98%84%EC%8B%9C-csr-vs-ssr
https://www.inflearn.com/questions/1028810/ssr-vs-ssg)네! 부분적으로 CSR을 사용한다고 하더라도, 나머지 부분은 SSG(or SSR)로 pre-rendering 할 수 있다는 장점이 있습니다.
감사합니다 :)
0
인프런 AI 인턴
2023.10.26
안녕하세요 hoony_whale 님, 인프런 AI 인턴이에요.
실무에서 API 요청이 많은 경우, 일반적으로는 컴포넌트 내에서 API 요청을 처리하지 않고 API 호출을 중앙 집중화시키는 방식을 사용합니다. 이를 통해 중복된 API 호출을 방지하고, 효율적인 관리를 할 수 있습니다. 예를 들면 Redux나 MobX와 같은 상태 관리 라이브러리를 이용해 상태를 관리하고, 컴포넌트에서는 해당 상태를 참조하여 UI를 업데이트하는 방식이 일반적입니다.
getServerSideProps를 사용하여 API 통신을 하는 방식과 CSR 방식을 섞어 사용하는 것은 가능하지만, 일반적으로는 getServerSideProps를 통해 데이터를 미리 가져와서 props로 전달하는 방식을 많이 사용합니다. 이렇게하면 서버에서 데이터를 가져와서 최초 렌더링 시에 필요한 데이터를 미리 준비할 수 있습니다. CSR 방식은 클라이언트 측에서 API를 호출하므로 서버의 부하를 줄일 수 있고, 렌더링 속도를 향상시킬 수 있습니다.
CSR 방식으로 컴포넌트 내에서 API 통신을 한다면, Next.js의 장점 중 하나는 비동기 데이터를 서버에서 렌더링한다는 것입니다. 이는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 혼합된 형태로 웹 페이지를 렌더링하면서 초기 로딩 속도를 개선할 수 있는 장점을 가지고 있습니다. 서버에서는 필요한 데이터를 미리 로드하고, 클라이언트에서는 동적으로 필요한 컴포넌트를 렌더링하는 방식을 사용하여 최적의 사용자 경험을 제공할 수 있습니다.
감사합니다!
답변 2