RSC
-
PandaCSS vs Tailwind CSS vs Vanilla Extract 비교 분석Tip 2025. 5. 11. 19:45
RSC(React Server Component)의 출시와 Next.js의 App Router 전환 뒤 전통적인 CSS-in-JS 방식의 한계로 더욱 각광받고 있는 Tailwind CSS, Vanilla Extract, PandaCSS를 비교해 보겠습니다.1. CSS-in-JS의 한계와 새로운 접근법의 필요성과거에는 styled-components나 Emotion과 같은 CSS-in-JS 런타임 스타일 생성 방식은 런타임에 JS로 스타일을 생성·주입하는 과정은 성능 오버헤드로 이어지고, SSR(서버사이드 렌더링) 환경에서는 추가 설정이 필요하거나 FOUC 문제가 발생하는 등의 단점이 명확했지만, 편리함이라는 장점이 너무 컸기에 폭넓게 사용되었습니다. 하지만 Next.js 13의 App Router 도입 ..
-
Next.js App Router Server Components와 Server Actions 알아보기 Part.1Next.js 2025. 4. 7. 00:27
Next.js 15의 App Router는 기존 Pages Router 기반의 클라이언트 중심 렌더링(CSR)에서 서버 중심 모델로의 큰 전환을 가져왔습니다.특히 React Server Components(서버 컴포넌트)와 Server Actions(서버 액션) 기능 도입을 통해 아키텍처 구조와 성능 측면에서 중요한 변화가 있었습니다. 이번 포스트에서는 Next.js 15 App Router의 서버 컴포넌트의 소개와 이전 Page Router와의 차이점, SSR/ISR 등 기존 렌더링 기법과의 비교를 다루겠습니다.App Router vs Page Router: 서버 중심 모델의 등장기존 Next.js Pages Router (pages 디렉터리 기반 라우팅)는 주로 CSR을 보완하기 위해 SSR(서버 사..