◆ SERIES · 3 POSTS

디렉티브 딥다이브

'use client', 'use server', 'use cache'. 파일 맨 위 한 줄이 빌드와 런타임에서 무엇으로 변하는지 소스 레벨까지 따라간 기록

README

React와 Next.js의 디렉티브는 파일 맨 위에 문자열 한 줄을 적는 것이 전부다. 그런데 그 한 줄이 만드는 결과는 전부가 아니다. 모듈 그래프가 갈라지고, 함수가 네트워크 엔드포인트로 바뀌고, 캐시 경계가 생긴다. 적기는 쉬운데 무슨 일이 벌어지는지는 설명하기 어려운 이 간극이 시리즈의 출발점이다.

세 편은 각각 'use client', 'use server', 'use cache'를 맡아, 디렉티브가 빌드 타임에 어떤 변환을 거치고 런타임에 어떤 코드로 실행되는지를 번들러와 React 소스까지 내려가서 따라간다. 각 편 서두에 분석한 소스의 버전 태그를 고정해 두었으므로, 이후 버전에서 달라진 부분이 있다면 그 기준으로 대조할 수 있다.

경계라는 같은 주제를 셋으로 나눈 것에 가깝기 때문에 순서는 크게 중요하지 않지만, 클라이언트 경계를 다루는 첫 편이 나머지 두 편의 용어를 깔아주는 역할을 한다.

03 ITEMS

전체 글

in order
01

'use client' 디렉티브 딥다이브: 클라이언트 경계의 끝까지

#react#nextjs#frontend
"use client" 한 줄이 만드는 모듈 경계, 빌드 타임 변환, Flight 직렬화, 그리고 성능까지
2026-05-0152분 · read
02

React 서버 함수 딥다이브: "use server"의 끝까지

#react#nextjs#frontend
"use server" 한 줄 뒤에서 무슨 일이 벌어지고 있는가?
2026-03-0942분 · read
03

'use cache' 디렉티브 딥다이브: 캐시 경계의 끝까지

#react#nextjs#frontend
"use cache" 한 줄이 만드는 빌드 타임 변환, 캐시 키 직렬화, ResumeDataCache, cacheHandler, 그리고 Cache Components까지
2026-05-0165분 · read