인프런 커뮤니티 질문&답변

아리마님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라먹는 Next.js(15+)

3.4) 리액트 서버 컴포넌트 이해하기

서버 성능 문의

해결된 질문

24.10.18 16:14 작성

·

40

0

안녕하세요. 강사님

React 로 CSR 개발/배포된 시스템을 운영해본 적이 있는데요.

nginx 가 단순히 정적 파일들만 클라이언트로 전달하니 서버 성능을 생각할 필요가 전혀 없었습니다.

그런데 Next.js 강의를 들으면서 SSR/SSG 에 대한 설명을 듣고나니 이 경우에는 서버 성능이 중요할 것 같다는 생각이 드네요. SSR/SSG 는 사용자 요청량이 증가하는만큼 서버 스펙도 확장될 수 있는 고민들이 필요한가요?

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 10. 18. 16:19

안녕하세요 아리마님 이정환입니다.

맞습니다. 예리하시군요 Next.js의 경우 서버측에서 수행하는 일이 많아진 만큼 스태틱 파일만 서빙하는 CSR 방식의 서버에 비해 훨씬 더 많은 부하를 받게 됩니다. 실시간으로 페이지를 생성하는 과정도 그렇고 이미지 캐시나 데이터 캐시까지.. 일정 정도의 서버 스펙이 필요 한것은 사실입니다.

따라서 CSR 방식만으로 충분히 해결이 가능한 문제라면 굳이 Next.js를 도입하실 필요는 없다고 생각합니다 😃

0

인프런 AI 인턴님의 프로필 이미지

2024. 10. 18. 16:16

안녕하세요, 인프런 AI 인턴입니다. 아리마님.

아리마님의 질문은 다음과 같은 이전의 질문과 답변이 관련이 있습니다. SSR과 SSG가 도입되면서 서버 성능 고려가 필요하다는 주제는 많은 분들이 궁금해 하시는 부분입니다.

관련 질문 및 답변들

  1. SSR/SSG와 서버 성능의 관계
    이 질문에서는 SSR과 SSG의 적용 시 서버 리소스를 어떻게 관리하는지의 문제를 다루고 있습니다. SSR은 서버에서 매 요청마다 새로운 페이지를 렌더링해야 하므로, 서버 성능과 확장성이 중요할 수 있습니다. 반대로 SSG는 빌드 타임에 정적으로 페이지를 생성하여 요청 시마다 동일한 HTML 페이지를 제공하므로 서버 부하가 덜합니다.

  2. Next.js의 SSR과 SSG의 적절한 사용
    질문에서는 각각의 사전 렌더링 방식이 적합한 상황을 설명하고 있습니다. SSR은 사용자에게 최신 데이터를 제공하기 위해 자주 사용되며, 이는 고정된 데이터를 자주 업데이트 해야 하는 페이지에서 적합할 수 있습니다. 반면, SSG는 배포 시점의 콘텐츠를 그대로 보여주는 경우에 유리합니다.

요약

  • SSR: 사용자 요청 시마다 실시간으로 페이지를 생성하므로 서버 리소스를 많이 소모할 수 있습니다. 따라서 사용자 요청이 늘어나면 서버의 확장성이 중요합니다. 캐싱을 통해 서버 로드를 줄일 수 있는 방법을 고려해 볼 수 있습니다.

  • SSG: 빌드 타임에 한 번 페이지를 생성하기 때문에 서버에 부담을 덜 줍니다. 데이터가 자주 바뀌지 않는 페이지에 적합하며 대규모 트래픽을 효율적으로 처리할 수 있습니다.

이를 통해 Next.js를 사용하여 서버 성능에 대한 최적화를 어떻게 수행할지 계획을 세울 수 있을 것입니다. 각 페이지의 요구사항에 맞추어 적절한 사전 렌더링 전략을 선택하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.