React가 서버 컴포넌트를 지원하는 이유
안녕하세요 선생님. 강의 잘 듣고 있습니다.
강의를 듣고 Next.js도 아니고 React는 CSR 방식인데 왜 서버 컴포넌트를 지원하지? 라는 의문이 생겼습니다.
React 공식문서를 보니 프레임워크와 통합하기 위해 Next.js 팀과 협력했다고 나오더라고요. React가 서버 컴포넌트를 지원하게 된 계기가 Next.js의 SSR 때문인지 궁금합니다.
공식문서 : https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks
답변 2
2
안녕하세요 이정환입니다.
우선 React.js는 CSR 방식으로 출발했지만 그렇다고 CSR 방식에만 국한된 라이브러리는 아닙니다. 따라서 Next.js의 SSR과 서버 컴포넌트의 탄생 자체는 크게 의미가 있지는 않습니다.
두 기술의 관계를 정확히 비유하자면 React.js 서버 컴포넌트를 가장 잘 지원하는 메타 프레임워크가 Next.js 정도라고 설명할 수 있을 것 같습니다.
서버 컴포넌트가 개발된 배경에 대해 더 자세히 알아보고 싶으시다면 아래 첨부드린 아티클을 참고하시면 좋을 것 같습니다. 다음은 Dan(전 React.js 코어팀 개발자)이 직접 작성한 React Server Component의 개발 배경입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 메가님.
React와 Next.js 간의 통합, 특히 서버 컴포넌트 지원에 관한 좋은 질문 주셨습니다. React가 서버 컴포넌트를 지원하는 이유와 그 배경에 대해 간단히 설명해 드리겠습니다.
React와 서버 컴포넌트
서버 컴포넌트 (Server Components): React에서 서버 컴포넌트를 도입한 이유는 서버와 클라이언트 간의 로직 분리를 통해 애플리케이션의 효율성을 높이기 위함입니다. 이는 서버에서 데이터 처리와 무거운 연산을 하고, 브라우저에서는 최종 UI 렌더링에만 집중하게 하여 더 나은 사용자 경험을 제공하는 것을 목적으로 합니다.
Next.js와의 협력: React는 Next.js 팀과 협력하여 서버 컴포넌트 기능을 개발했습니다. Next.js는 이미 SSR(Server-Side Rendering) 및 SSG(Static Site Generation)를 통해 서버와 클라이언트 간의 렌더링을 조화롭게 관리하고 있으므로, React의 새로운 기능인 서버 컴포넌트를 Next.js와 자연스럽게 통합할 수 있었습니다. 이는 Next.js의 SSR을 지원하고자 하는 React의 노력 중 하나로 볼 수 있습니다.
계기와 연관성
- SSR의 필요성: Next.js의 성공적인 SSR 구현은 서버 컴포넌트 개발에 큰 영향을 미쳤습니다. 다양한 개발자들이 서버에서의 렌더링을 통한 성능 향상을 경험하면서, React 팀도 이러한 요구에 부응하게 된 것입니다.
공식 문서에서도 React와 Next.js 팀이 협력하여 새로운 기능을 개선했다고 언급되어 있으며, 이는 Front-End 개발자에게 더 많은 선택지와 유연성을 제공하기 위한 전략적 움직임입니다. 공식문서에서 언급된 내용을 참고해주세요:
- 공식문서의 자세한 내용: React의 Bleeding Edge Frameworks
유사한 질문과 답변을 참고하시면 추가적인 이해에 도움이 될 것 같습니다:
- Next.js와 SSR/SSG 사용 원칙: Next.js와 React 간의 SSR 협력에 대해 다루고 있는 게시물입니다.
- React와 서버 컴포넌트의 중요성과 사용: 서버 컴포넌트의 도입 배경과 효과를 제시하는 게시물입니다.
React에서는 다양한 환경에서 효율적인 개발을 지원하기 위해 지속적으로 발전하고 있으며, 서버 컴포넌트의 도입은 그 방향성 중 중요한 한 부분입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
23
2
next.js 프로젝트
0
28
1
Next.js + Tanstack Query BFF 구조 질문
0
29
2
Next.js 사전렌더링 이해하기 부분
0
34
2
모달 관련 질문
0
42
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
65
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
94
3
vercel 배포를 실패하였습니다.
0
101
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
61
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
117
2
일반적인 nextjs project architecture에 대하여..
0
90
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
74
2
배포 시 오류 발생
0
90
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
93
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
107
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
77
2
익스텐션 질문
0
61
1