page 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 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(서버 사..
-
왜 useBack 커스텀 hook을 만들었는가?Next.js 2025. 2. 15. 18:58
내비게이션 경험은 사용자 만족도를 결정짓는 핵심 요소입니다.특히 모바일 환경이나 복잡한 내비게이션 구조를 가진 웹 애플리케이션에서는 router.back()이 예상대로 동작하지 않는 경우가 많습니다.이 문제를 해결하고자 useBack이라는 커스텀 hook을 개발하였습니다.기존 router.back()의 한계1. 히스토리 스택 부족 문제router.back()은 브라우저 히스토리를 기반으로 작동하지만, 사용자 흐름에 따라 예상치 못한 동작을 유발할 수 있습니다.사용자가 외부 링크를 통해 유입되었거나 페이지를 새로고침한 경우, 히스토리 스택이 충분하지 않아 router.back()이 동작하지 않을 수 있습니다.이 경우 사용자가 "뒤로 가기" 버튼을 눌러도 이전 페이지로 이동하지 못하고 빈 화면 혹은 예기치 ..