server component
-
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.2Next.js 2025. 4. 7. 22:29
이번 편에서는 이전 편에 이어 서버 컴포넌트 및 서버 액션을 중심으로, 성능 향상 효과, 그리고 개발자 경험(DX)의 변화를 깊이 있게 살펴보겠습니다. Server Actions: 서버에서 직접 수행하는 액션 처리App Router의 또 하나의 혁신은 Server Actions(서버 액션) 기능입니다.서버 액션은 간단히 말해 서버에서 실행되는 함수를 클라이언트에서 호출할 수 있게 해주는 기능입니다.Next.js 13.4에서 알파로 도입되어 Next.js 15에 이르러 더욱 안정화된 기능으로, 폼 제출이나 데이터 변경(mutation) 로직을 보다 직관적이고 타입 안전한 방법으로 구현할 수 있게 합니다. Page Router 시절에는 사용자 입력을 처리하려면 보통 API Route를 만들고 (pages/a..
-
Next.js Conf에서 발표된 Next.js 13버전 정리Next.js 2022. 10. 29. 17:53
1. 새로운 File System Router인 app Directory(beta) 추가 pages 폴더를 이용해 간단하게 router page를 생성할 수 있다는 것은 Next의 가장 큰 킬링 포인트 중 하나였습니다. 이번 13 버전에서는 이런 Next의 장점과 React@18에서 출시한 Server Component를 효과적으로 사용할 수 있게 해 줄 app 폴더가 추가되었으며, beta상태인 지금과 달리 점점 pages 폴더를 대체해 나가거나 app은 server components용, pages는 client components용으로 적용될 것이라고 예상됩니다. app폴더는 기존 pages폴더에 많은 사람들이 만들었던 components 폴더를 합쳐둔 것 같은 폴더로 공통 layout, head,..