Next.js는 React를 기반으로 한 프레임워크중 가장 대표적인 프레임워크이다. 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 지원하여 양쪽의 특징을 선택적으로 사용할수 있다는것이 가장 큰 특징이자 장점이다.
1. 개요 - 각각 어느상황에 사용해야하나?
Next.js에서 제공하는 렌더링 방식을 잘 활용하여 개발하는것이 가장 중요한 포인트이다. 클라이언트 사이드 렌더링이 필요할때는 문서 최상단에 "use client"를 작성하며, 아무것도 작성하지 않을때는 기본적으로 서버 사이드 렌더링을 진행하지만 명시적으로 "use server"를 써주기도 한다.
기본적인 Next.js 프로젝트의 설계방식은 서버 사이드 렌더링을 기반으로 하여 필요에따라 클라이언트 사이드 렌더링을 가져와 사용한다. (클라이언트 컴포넌트를 따로 만들어 서버 컴포넌트에서 불러와(import) 사용)
이는 초기 서버 데이터 로드, 검색 엔진 최적화에 필요한 웹페이지 전반을 서버 사이드 렌더링으로 설계하고, 사용자 입력을 실시간으로 처리해야하거나 인터렉티브 디자인을 필요로하는 요소를 클라이언트 사이드 렌더링으로 부분설계하여 Next.js의 특징을 최대로 활용하기 위함이다.
※ Next.js의 렌더링은 훨씬 복잡한 구조를 가지지만 여기서는 간단히 설명한다. 렌더링 방식을 결정하는것은 "use client"와 "use server"만 있는것이 아니며 상황에 맞춰 유기적으로 사용하는것이 가장 중요하다!
2. 특징
next.js 홈페이지의 docs에서 둘의 특징을 찾아볼 수 있다.
2-1. Server Component (use server)
- 장점
- 서버에서 렌더링을 담당하여 빠른 초기 로딩속도
- API 요청, 데이터 다루기와 검증 등
- 주요 데이터를 서버에서 미리처리하여 렌더링하므로 SEO(검색엔진최적화)에 유리
- 단점
- 서버에서 요청과 렌더링을 모두 담당하므로 서버 부하 증가
- 유저 인터랙티브 요소나 useState, useEffect등 클라이언트 전용 훅의 사용 불가
- 기타 클라이언트 컴포넌트 장점의 활용 불가능
2-2. Client Component (use client)
- 장점
- onClick등의 이벤트리스너나 상태관리등의 사용이 가능
- 브라우저 API의 사용이 가능
- SPA활용으로 빠른 페이지 전환등이 가능해짐
- 위 장점들이 합쳐져 인터랙티브 요소의 추가나 부드러운 화면전환 등 사용자경험 향상에 큰 도움이 됨
- 서버의 부하 감소
- 단점
- HTML, CSS, JS를 모두 다운받아 브라우저에서 직접 렌더링하므로 초기로딩시간이 길어짐
- 렌더링전 빈페이지이므로 SEO에 매우 불리
- 기타 서버 컴포넌트 장점의 활용 불가능
| 특징 | 서버 컴포넌트 (use server) |
클라이언트 컴포넌트 (use client) |
| 초기 로딩 속도 | 빠름 | 느림 |
| SEO | 우수 | 불리 |
| 서버 부하 | 높음 | 낮음 |
| 사용자 경험 | 제한적 | 풍부 |
| 상태 관리 | 불가능 | 가능 |
| 브라우저 API | 사용 불가 | 사용 가능 |
3. 결론
렌더링 방식을 유동적으로 선택하여 렌더링 방식에 따른 장점들을 필요한곳에 가져다 쓰는것은 Next.js를 활용하는 아주 중요한 이유이다. 각 특징을 잘 파악하고 어떤 상황에 사용해야하는지 이해하는것이 중요하다.