설명하기 앞서
무작정 Next.js App Router를 통해 토이프로젝트를 하나 만들고 싶어 글을 쓰게 되었다. 공식 홈페이지를 통해 프로젝트를 생성했는데 설치 시 다음과 같은 프롬프트가 하나 떳다.
한번도 사용 해보지 않은 Tailwind CSS부터 생소한 Turbopack 까지 왜 사용하기를 물어보는지 궁금해서 우선적으로 제일 궁금한 '왜 Tailwind CSS를 권장할까?'에 대한 의문점을 풀고자 글을 쓰게 되었다.
설명하기 앞서 렌더링 방식에 대해 설명하고 들어가는게 좋을 것 같아 렌더링 방식 및 정적 렌더링과 동적 렌더링이 무엇인지 짚고 설명하겠습니다.
Next.js 의 렌더링 방식
기본적으로 Next.js는 SSR 방식과 정적 사이트(SSG)을 지원합니다.
리액트와 같은 자바스크립트 기반으로 하는 어플리케이션은 자바스크립트로 동작하기 떄문에 자바스크립트를 다운로드 한 후에 브라우저에서 자바스크립트가 실행되어야 화면에 UI가 표시됩니다.(CSR)라고 하죠. 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않기 때문에 검색엔진과 같은 로봇들이 컨텐츠를 이용할 수 없다는 치명적인 단점이 있습니다. 그 외에도 자바스크립트를 다운로드 하고 실행하기 전까지는 화면이 표시되지 않는 등의 문제가 있습니다
서버사이드 렌더링(SSR)은 서버쪽에서 자바스크립트가 실행됩니다. 브라우저로는 완성된 HTML을 전송하기 때문에 자바스크립트를 실행할 수 없는 환경에서도 잘 동작합니다. 다운로드 받는 즉시 실행되기 때문에 사용자 입장에서 눈 깜짝할 사이에 웹페이지가 표시되는 느낌을 받게 됩니다.
정적 렌더링(Static Rendering)
우선 Tailwind CSS 를 설명하기 앞서 동적 렌더링과 정적 렌더링의 개념과 차이점을 짚고 넘어가야 이해가 더 수월할 거 같아 정리해봅니다.
정적 렌더링은 페이지를 빌드 시점에 미리 생성하여 HTML 파일로 저장하는 방식입니다. 사용자가 페이지를 요청하면 서버에 직접 요창하는 대신 사용자와 가장 가까운 CDN 에서 바로 캐시 된 응답을 받게 됩니다.
사용자의 요청에 빠르게 응답할 수 있다는 장점과 빌드 타임에 페이지를 생성해야 하기 떄문에 어떤 데이터를 보여줘야 할지 미리 알 수 있는 경우 활용하기 좋습니다. 예시로는 블로그 포스트, 제품 상세 페이지 등 자주 변경되지 않는 컨텐츠에 정적 렌더링을 활용하기에 좋습니다.
동적렌더링(Dynamic Rendering)
서비스를 개발하다 보면 빌드 타임에 페이지를 렌더링 하는데 필요한 모든 데이터를 미리 알 수 있는 경우는 많지 않습니다. 이커머스 서비스에서 사용자 맞춤화된 상품을 보여줘야 하는 경우 빌드 타임에는 사용자가 누구일지 알 수 없기 때문에 미리 페이지를 생성할 수 없습니다. 이 경우에는 런타임에 페이지를 생성하는 동적 렌더링 전략을 활용해야 합니다.
동적 렌더링은 각 사용자 요청 시 서버에서 페이지를 생성하여 제공하는 방식입니다. 사용자 맞춤형 데이터나 실시간 정보가 필요한 경우에 적합합니다.
CSS-in-JS의 한계
다시 본론으로 돌아와 왜 Next.js는 왜 Tailwind CSS를 기본적으로 추천할까요?
위 그림은 Next.js 공식문서 사진입니다. CSS-in-JS는 JavaScript 코드 내에 CSS를 작성하여 런타임에 스타일을 적용하는 방식입니다. 이 방식은 동적인 스타일링에 유리하지만 다음과 같은 단점이 있습니다.
- 런타임 오버헤드 : CSS-inJS 는 스타일을 런타임에 생성하므로, JavaScript가 완전히 로드되고 실행된 후에야 스타일이 적용됩니다. 이는 초기 렌더링 속도를 저하시킬 수 있습니다.
- 서버 컴포넌트와의 비호환성 : Next.js의 App Router는 서버 컴포넌트를 기본으로 사용하며, 서버에서 렌더링되어 클라이언트에 전잘됩니다. 대부분의 CSS-in-JS 라이브러리는 클라이언트 사이드에서 스타일을 적용하므로, 서버 컴포넌트와의 통합에 어려움이 있습니다.
빌드 타임 : 배포되기 전에 개발자가 작성한 코드를 컴파일하거나 번들링하는 시점입니다. 이 단계에서 정적인 자원들이 생성됩니다.
런타임 : 사용자가 웹사이트를 방문하여 애플리케이션이 실행되는 시점입니다. 이때 동적인 동작이 이루어집니다.
Tailwind CSS in Next.js
Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 이름을 통해 스타일을 적용합니다.
- 정적 스타일링: Tailwind CSS는 빌드 시점에 필요한 CSS만을 생성하므로, 런타임 오버헤드가 없습니다.
- 서버 컴포넌트와의 완벽한 호환성: 스타일이 클래스 이름으로 적용되므로, 서버에서 렌더링된 HTML에 바로 적용할 수 있어 서버 컴포넌트와의 통합이 용이합니다.
- 번들 최적화: 사용되지 않는 CSS는 빌드 시 제거되어 최종 번들 크기를 최소화합니다.
- 빠른 개발 속도: 미리 정의된 유틸리티 클래스를 사용하여 빠르게 스타일을 적용할 수 있어 개발 속도가 향상됩니다.
결국 이러한 이유로, 스타일을 빌드 타임에 미리 생성하고 정적 클래스 기반으로 빠르게 렌더링되는 Tailwind CSS를 추천하는 이유입니다.
Ref
