인프런 커뮤니티 질문&답변
작성한 질문수
next.js 에서 서버 컴포넌트 비중을 늘리는 이유
해결된 질문
24.08.02 18:30 작성
·
124
·
수정됨
1
1. 강사님께서 올려주신 답변들을 봤습니다. "공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다."이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요?
2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
답변 1
2
2024. 08. 03. 14:08
안녕하세요! 남겨주신 질문에 답변 드릴게요.
프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요?
서버 컴포넌트의 비중이 늘어난다는 건 브라우저에서 해석할 컴포넌트가 줄어든다는 의미입니다. 따라서 JavaScript 번들 파일의 크기가 줄어듭니다. 이는 전체적인 어플리케이션의 로딩 속도 개선에 긍정적인 영향을 끼칠 수 있습니다.
서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
이 부분은 답하기에 모호한 부분이 있는데요. 질문의 의도를 두 가지로 나눠서 답변드려보겠습니다.
만일 질문의 의도가 "번들 사이즈를 줄이기 위해 서버 컴포넌트를 활용하는 것인가요?" 라면 답은 "Yes" 입니다. 브라우저가 해야할 일을 최대한 서버가 처리해서 번들 사이즈를 줄여 로딩 속도, 퍼포먼스 향상에 도움을 주기 위해 서버 컴포넌트를 활용합니다.
허나 "Next.js를 사용하는 이유가 서버 컴포넌트가 주는 장점 때문인가요?"라는 의도로 질문 남겨주신 것이라면 답은 "No"입니다.
현재를 기준으로 Next.js는 서버 컴포넌트를 사용하기 가장 편리한 프레임워크가 맞습니다. 때문에 서버 컴포넌트를 활용해 서비스를 개발하기 위해서 Next.js를 도입할 수 있죠.
하지만 서버 컴포넌트는 Next.js의 전유물이 아닙니다. 이후 Remix와 같은 다른 프레임워크에서도 서버 컴포넌트를 활용할 수 있게 될 예정입니다. 따라서 서버 컴포넌트를 위해 Next.js를 쓴다고 잘라 말하기 어려운 부분이 있습니다.
Next.js는 서버 컴포넌트가 없이도 React를 사용하는 개발자에게 개발 경험을 비롯한 퍼포먼스 개선에 도움을 주는 프레임워크 입니다. 서버 컴포넌트가 없는 13 버전 이전의 Next.js, Pages Router가 존재하는 이유입니다.
질문에 대한 답이 되었으면 좋겠네요.
추가 질문이 있으시다면 언제든 편하게 남겨주세요!
감사합니다.
2024. 08. 04. 16:46
질문. Next 프로젝트에서 서버 컴포넌트로 백 API를 요청하면 CORS문제 발생 안하는 것 같은데 이는 CORS는 브라우저 origin과 관련이 있지만 서버컴포넌트 브라우저 origin과 관련이 없어서 발생 안하는 건가요?
2024. 08. 05. 21:41
Next 프로젝트에서 서버 컴포넌트로 백 API를 요청하면 CORS문제 발생 안하는 것 같은데
CORS 이슈는 교차 출처를 허용하지 않은 경우에 발생하는 이슈입니다. 다시 말해, 브라우저에서 동작하고 있는 서비스의 URL과 API가 다른 경우 기본적으로 요청이 허용되지 않는 것이죠.
반면, 서버 컴포넌트의 경우 실행이 서버에서 이뤄지기 때문에 CORS 정책에 걸리지 않습니다. 브라우저를 타지 않기 때문이죠.
CORS는 브라우저 origin과 관련이 있지만 서버컴포넌트 브라우저 origin과 관련이 없어서 발생 안하는 건가요?
어쩌면 이미 답을 알고 계셨던 것 같네요ㅎㅎㅎ 확인 차원에서 질문 주신 것 같아 답변 남겼습니다!
또 궁금한 부분이 있다면 질문 남겨주세요 😃
2024. 08. 04. 16:41
react -> next.js로 입문하면서 의문이 드는점이 많았는데 친절한 답변 감사합니다. 가격에 비해 높은 퀄리티의 답변을 받을 수 있어서 이 강의의 강점이네요!!!!!!!!