Next.js에서 자꾸 use client를 써도 되는가(feat. SSR, CSR)

 

Next.js에서 Three.js나 vtkjs와 같은 그래픽 라이브러리들을 활용하다 보면, 어쩔 수 없이 계속해서 자바스크립트 또는 타입스크립트 파일 최상단에 use client를 입력하게 되는 경우가 왕왕 발생한다.

Next.js는 아무래도 서버 사이드 렌더링(Server-Side Rendering, SSR)이 장점인 프레임워크이다 보니, use client를 쓰면 그 장점을 퇴색시키는 것 같은 죄책감이 든다.

결론부터 말하자면 죄책감을 느낄 필요는 없다. "use client"의 사용은 성능 측면에서 느려지는 요인이 아니라, 오히려 성능을 최적화하기 위한 목적으로 도입된 기능이다. 이를 통해 개발자는 애플리케이션의 성능을 더 세밀하게 조정하고, 사용자 경험을 개선할 수 있다.

Next.js에서 "use client"를 사용하는 것은 Next.js 13 이상의 버전에서 도입된 새로운 기능으로, 서버 컴포넌트와 클라이언트 컴포넌트를 구분하기 위한 명시적인 방법이다. 이 구분은 Next.js의 서버 컴포넌트 아키텍처의 일부로, 렌더링 성능을 최적화하고 클라이언트 사이드와 서버 사이드의 코드 실행 위치를 더 명확하게 구분하기 위해 도입되었다.

"use client"의 도입 배경

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하는 프레임워크다. SSR은 초기 페이지 로드 시 서버에서 HTML을 생성하고 클라이언트로 전송함으로써, 초기 로딩 성능을 개선하고 검색 엔진 최적화(SEO)를 향상시킬 수 있는 방법이다. 그러나 모든 컴포넌트가 서버에서 렌더링될 필요는 없으며, 일부는 클라이언트 사이드에서만 실행되어야 할 수 있다.

"use client" 사용

• 클라이언트 컴포넌트: "use client"를 파일 상단에 추가함으로써, 해당 컴포넌트가 클라이언트 사이드에서만 렌더링되어야 함을 명시적으로 표시한다. 이는 브라우저에서만 사용되는 API나 상호 작용이 많은 기능(예: 입력 양식 처리, 클라이언트 사이드 라우팅)에 유용하다.
• 서버 컴포넌트: "use client"를 사용하지 않는 컴포넌트는 서버 컴포넌트로 간주되며, 이들은 서버에서 렌더링되어 초기 페이지 로드 시 클라이언트로 전송된다.

성능적인 측면

• 성능 향상: "use client"를 사용함으로써 개발자는 컴포넌트가 실행되어야 할 적절한 위치(서버 또는 클라이언트)를 명확히 지정할 수 있다. 이는 불필요한 자바스크립트 실행을 줄이고, 클라이언트 사이드의 부하를 최소화하여 애플리케이션의 전반적인 성능을 개선할 수 있다.
• 로딩 시간 단축: 서버 컴포넌트는 사용자에게 빠르게 콘텐츠를 제공하기 위해 서버에서 사전 렌더링되며, 클라이언트 컴포넌트는 필요한 경우에만 로드되어 실행된다. 이는 특히 초기 페이지 로딩 시간을 단축시키는 데 도움이 된다.

 

추가적으로, 이와 관련한 SSR과 CSR에 대한 장단점을 알아보도록 하겠다.

---

Next.js에서 'use client' 또는 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)을 사용하는 것과 Next.js의 주요 장점 중 하나인 서버 사이드 렌더링(Server-Side Rendering, SSR)을 활용하는 것 사이에는 중요한 차이가 있다. 이해를 돕기 위해 두 가지 접근 방식의 차이점과 각각의 장단점을 설명하겠다.

1. 서버 사이드 렌더링 (SSR)의 장점:

• SEO 최적화: 서버에서 렌더링된 페이지는 검색 엔진에 의해 더 잘 인덱싱될 수 있다. 왜냐하면 페이지의 컨텐츠가 HTML 형태로 이미 존재하기 때문이다.
• 빠른 첫 페이지 로드: 사용자에게 보여질 초기 컨텐츠가 서버에서 이미 생성되어 전송되므로, 클라이언트에서 추가적인 자바스크립트 처리 없이 바로 표시될 수 있다.
• 사용자 경험 개선: 초기 로드 시간이 단축되어 사용자 경험(UX)이 개선된다.

2. 클라이언트 사이드 렌더링 (CSR)의 장점:

• 브라우저 최적화: 일부 라이브러리나 기능들은 브라우저의 특정 기능에 의존하기 때문에 클라이언트 사이드에서만 제대로 작동한다.
• 동적 상호작용: 클라이언트 사이드 렌더링은 사용자 상호작용에 따라 동적으로 콘텐츠를 변경하는 경우에 유리하다.
• 부분적인 페이지 업데이트: 전체 페이지를 새로 고침하지 않고도 일부분만 업데이트 할 수 있다.

'use client' 사용 시의 차이점:

• 'use client'를 사용하는 경우, 해당 컴포넌트나 기능은 클라이언트 사이드에서만 실행된다. 즉, 서버 사이드에서는 이 컴포넌트나 기능에 대한 렌더링이 이루어지지 않으며, 모든 처리가 브라우저에서 진행된다.
• 이는 Next.js의 SSR 기능을 일부 포기하는 것을 의미한다. 즉, 해당 컴포넌트에 대한 SEO 이점이나 서버 사이드 렌더링의 초기 로드 시간 단축 효과를 활용할 수 없게 된다.
• 그러나, 이는 브라우저 전용 기능을 사용해야 하거나, 클라이언트 사이드에서만 가능한 동적 상호작용이 필요한 경우에는 필수적일 수 있다.

결론적으로, Next.js에서는 가능한 경우 서버 사이드 렌더링을 활용하는 것이 좋지만, 특정 상황에서는 클라이언트 사이드 렌더링이 더 적합할 수 있다. 개발 시에는 각 컴포넌트와 기능의 요구 사항과 목적에 따라 적절한 렌더링 방식을 선택하는 것이 중요하다.