Next.js

Next.js를 공부해가며 client component, server component 두 가지의 컴포넌트의 차이에 대한 모호한 개념만을 가지고 있었음을 알게되어 한번 정리해보고 싶어졌다.

Server Component

Server Component는 이름 그대로 서버에서 실행되는 React 컴포넌트라 볼 수 있다. 이러한 서버 컴포넌트는 서버측에서 이미 랜더링되어 있어서 초기 HTML을 렌더링할 때 필요한 변하지 않는 초기 데이터를 미리 세팅할 때 큰 도움을 준다.

장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠르다

단점 : HTML 안에 자바스크립트 코드를 넣을 수 없다. useState, onClick, useEffect 등..

Client Component

사용할 때 'use client'를 작성하고 그 파일에 만드는 component들은 client component들이 된다. 서버 컴포넌트들과는 반대로, HTML을 동적으로 바꿀수 있는 다양한 기능을 넣을수 있다.

장점 : HTML을 동적으로 바꿀 수 있는 기능을 다양하게 사용할 수 있다. useState, onClick, useEffect 등..

단점 : 페이지 로드시에 자바스크립트 파일들이 필요하기에 비교적 느린 로딩속도를 가진다.

다음은 차이점을 표로 정리한 것이다.