React

Next.js 13의 App Router와 React Server Components를 사이드 프로젝트에 적용해봤다. 기존 Pages Router와의 차이점과 마주친 문제들을 정리했다.

Next.js 13 App Router에서 Server Components를 실제 프로젝트에 적용해봤다. 클라이언트 번들 사이즈를 30% 줄이는 데 성공했지만, 러닝 커브와 제약사항도 만만치 않았다.

프로젝트에서 복잡한 로딩 상태 관리가 번거로워 React 18의 Suspense를 실제 데이터 페칭에 적용해봤다. TanStack Query와 조합하니 코드가 확실히 간결해졌다.

Next.js 13 app directory를 프로덕션에 적용하면서 발생한 클라이언트 번들 사이즈 증가 문제를 분석했다. Server Component와 Client Component 경계를 재설정하여 해결한 과정을 기록한다.

대량의 검색 결과를 렌더링하는 페이지에서 입력 지연 문제가 발생했다. React 18의 useDeferredValue를 적용해 입력 반응성을 개선한 과정을 정리했다.

Next.js 13 App Router를 실험하던 중 Server Components와 Client Components의 경계에서 발생한 문제들을 정리했다. 기존 React 패턴과의 차이가 생각보다 컸다.

Next.js 13 app directory를 실험해보며 React Server Components의 실제 적용 가능성을 검토했다. 기존 아키텍처와의 충돌 지점과 마이그레이션 비용을 정리했다.

검색 필터링 기능에서 입력 지연 문제가 발생해 useTransition을 적용했다. startTransition으로 비긴급 업데이트를 분리하니 입력 반응성이 눈에 띄게 개선되었다.

Next.js 13의 app directory를 실험적으로 적용해보면서 React Server Components의 개념을 파악했다. 아직 프로덕션 적용은 이르다고 판단했지만, 앞으로의 방향성은 충분히 이해할 수 있었다.

Next.js 13에서 안정화된 App Router와 React Server Components를 실제 프로젝트에 적용하면서 겪은 시행착오를 정리했다. 기존 Pages Router와의 차이점과 마이그레이션 전략을 기록한다.