서버 컴포넌트를 사용하는 이유?
서버 컴포넌트를 사옹하면 서버에서 렌더링하고 선택적으로 캐싱할 수 있다.
기본적으로 Next.js는 서버 컴포넌트를 사용한다.
⭐️ 서버 렌더링의 이점
1. 데이터 가져오기 성능 향상
서버에서 렌더링하기 때문에 렌더링에 필요한 데이터를 가져오는데 경과되는 시간과 클라이언트가 JavaScript를 다운로드, 분석 및 실행할 필요가 없기 때문에 수행해야 하는 요청 수를 줄여 성능을 향상시킬 수 있다.
2. 보안성
서버 컴포넌트를 사용하면 토큰 및 API 키와 같은 민감한 데이터를 클라이언트에 노출할 위험 없이 서버에 보관할 수 있다.
3. 캐싱과 재사용
서버에서 렌더링하면 결과를 캐싱하고 재사용할 수 있다. (데이터 조회 수가 줄어들기 때문에 성능 향상 및 비용 절감에 유리)
4. 초기 페이지 로딩 속도
서버가 페이지를 Javascript를 실행시켜 렌더링한 후 HTML 문서를 클라이언트로 보내주기 때문에 클라이언트에서 JavaScript를 실행하길 기다리지 않고 사용자가 즉시 페이지를 볼 수 있도록 할 수 있다.
5. 검색 엔진 최적화
렌더링된 HTML은 검색 엔진 봇이 페이지를 인덱싱하는데 사용되기 때문에 검색 엔진 최적화에 유리하다.
6. 스트리밍
서버 컴포넌트를 사용하면 렌더링 작업을 청크로 분할하고 준비가 되면 클라이언트로 스트리밍할 수 있다.
이를 통해 사용자는 전체 페이지가 서버에서 렌더링될 때까지 기다리지 않고도 페이지의 일부를 더 일찍 볼 수 있다.
