모든 컴포넌트를 클라이언트 컴포넌트로 했을 때
31
작성자 없음
안녕하세요, 저는 회사에서 next.js로 포팅하여 개인적으로 좀 공부하고 있는 학생입니다.
현재 2강 할 일 관리 앱을 보면서 저희 회사의 작업 방식을 함께 생각해봤는데
저희 회사는 꼭 필요한 부분 (iron-session을 이용하여 세션을 가져온다거나)을 제외하고는 죄다 클라이언트 컴포넌트로 바꿔서 사용하고 있습니다.
그래서 이 작업을 진행하면서도 클라이언트 컴포넌트로 모두 바꾸어 진행한다면 어떨까라고 생각이 들었었는데 과제에서는 최소한의 컴포넌트만 클라이언트 컴포넌트로 바꾸라고 하신 이유가 궁금합니다.
감사합니다!
답변 3
0
안녕하세요, 인프런 AI 인턴입니다. dbdnjstkd369님.
Next.js를 사용하면서 모든 컴포넌트를 클라이언트 컴포넌트로 변경하고자 하는 의문을 가지셨군요. 이를 이해하기 위해 서버 컴포넌트와 클라이언트 컴포넌트의 역할을 알아보는 것이 중요합니다.
서버 컴포넌트와 클라이언트 컴포넌트 차이점
서버 컴포넌트: 서버에서 렌더링되고 초기 데이터를 식별해서 정적 페이지를 만들어 클라이언트로 전송합니다. 이 과정은 사용자가 보는 페이지가 빠르게 로딩되는 데 크게 기여하며, SEO에 유리합니다. 또한 서버 리소스를 활용하므로 클라이언트 쪽의 리소스를 절약할 수 있습니다.
클라이언트 컴포넌트: 사용자의 인터랙션을 기반으로 동작하는 컴포넌트로, 브라우저에서 직접 렌더링합니다. 브라우저를 통해 동적 UI 업데이트가 필요할 때 특히 유용합니다.
꼭 필요한 부분만 클라이언트 컴포넌트로 사용하는 이유
Next.js 프로젝트에서 꼭 필요한 부분만 클라이언트 컴포넌트로 사용하는 이유는 최적화 및 성능 관리 관점에서 중요합니다.
최적화: 너무 많은 컴포넌트를 클라이언트 컴포넌트로 하면, 브라우저에서 처리해야 할 자바스크립트의 양이 많아집니다. 이는 초기 로딩 시간에 부정적인 영향을 끼칠 수 있습니다.
서버 자원 활용: 서버에서 미리 계산할 수 있는 것은 서버에서 처리한 후 사용자에게 정적 페이지로 제공하여 빠른 응답을 줄 수 있습니다.
SEO 및 퍼포먼스: 서버 컴포넌트를 활용하여 SEO 최적화된 페이지를 빠르게 전송할 수 있습니다. 이는 특히 SEO가 중요한 페이지에서 중요한 요구 사항입니다.
다음 링크는 비슷한 고민을 갖고 있는 개발자들에게 도움이 되는 추가 정보를 제공하니 한번 참고해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
클로드 채팅에서 코드로 넘어가기
0
12
1
클로드 코드 시작하기
0
12
1
Context API vs Zustand 그리고 Auth
0
17
2
110강부터 따라가기가 힘듭니다...
0
28
1
커서에서 붙여넣기
0
14
1
스니펫이 이상해요
0
26
2
쿠키 생성 관련
0
79
3
JWT auth error invalid token
0
76
2
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
76
1
lucide react 아이콘 설치
0
102
2
02-04 layout.tsx 구조가 달라요
0
109
2
10-6 실습 할 수 없습니다..
0
123
1
그림 예제는 따로 제공이 안되나요?
0
104
1
cacheLife에 대한 질문입니다
0
97
1
(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상
0
110
2
디스코드 채널 초대 링크
0
142
1
revalidatePath 질문 있습니다.
0
103
2
MainLayout이 중첩되어 뜨는 문제
0
107
2
쿠키와 헤더
0
89
2
구지 react를 사용하는 이유가 그럼 있는가?
0
118
1
FormEvent가 deprecated 되었다고 합니다.
0
493
2
터보백이 안보입니다
0
96
2
젯브레인 웹스톰(jetbrains webstorm) 사용하시는 분들 참고
0
167
2
소스 코드 다운로드는 어디서 하나요.
0
115
2