Frontend

기술 기록

Next.js App Router 요청 흐름 지도

요청 하나가 Proxy와 Route를 지나 화면이 뜨고, 사용자 동작이 Server Action을 거쳐 두 캐시로 갈라지는 자리를 한 장으로 이었다.

SSR과 RSC를 다른 축으로 갈라 보고, RSC Payload가 초기 로딩과 Client Navigation에서 각각 어떻게 쓰이는지 짚었다.

Route Handler와 Server Action이 갈리는 지점, 그리고 TanStack Query 캐시와 Next.js 캐시가 다른 계층이라는 걸 정리했다.

브라우저 주소창의 URL이 Server Component에 닿기까지 DNS·CDN·라우트 매칭·Proxy 실행 순서를 따라가며 정리했다.

Server Function과 Server Action의 구분부터 useActionState, useOptimistic, use까지 서버 작업을 UI에 잇는 방식을 정리했다.

Server Component와 Server State가 왜 다른 질문인지, 실행 위치와 데이터 소유권 두 축으로 갈라 정리했다.

rendering이라는 말이 자리마다 다른 걸 가리켜서, Hydration이 붙잡는 대상과 React render의 경계를 나눠 정리했다.

React가 서버에서도 실행되는 이유와 CSR·SSR의 차이를 React 자체가 무엇인지부터 되짚어 정리했다.

크롤링·색인·Open Graph를 분리해 검색 결과에서는 감추고 링크 미리보기는 살리는 설정을 정리했다.

Next.js 개발 오버레이의 useId 하이드레이션 경고를 추적하며 createPortal과 독립 React Root의 차이를 정리했다.