Next.js 16.3 Instant Navigations 적용기: 앱처럼 느껴지는 라우팅 만들기

서버 컴포넌트 기반 앱을 쓰다 보면 페이지를 클릭할 때마다 로딩 화면이 잠깐씩 뜨는 경험을 피하기 어렵다. 서버에서 데이터를 새로 가져오는 구조이니 어느 정도 자연스러운 현상이지만, 사용자 입장에서는 클릭할 때마다 화면이 끊기는 느낌을 받게 되고, 이는 싱글 페이지 애플리케이션(SPA)과 비교했을 때 체감 반응 속도의 차이로 이어진다. 서버 렌더링의 장점을 포기하지 않으면서 이 문제를 해결하려는 시도가 Next.js 16.3에서 발표됐다.

Instant Navigations는 무엇으로 이루어지나

Cache Components: 즉시 보여줄 화면을 미리 준비한다

Next.js 공식 블로그에 따르면, Instant Navigations는 두 가지 기능이 함께 작동해서 만들어진다. 첫 번째는 Cache Components로, 라우트가 클릭 즉시 보여줄 수 있는 UI(정적이거나 캐시된 껍데기 화면)를 미리 확보해두는 역할을 한다. 실제 데이터가 필요한 동적인 부분은 이 껍데기 화면 위에서 Suspense를 통해 나중에 스트리밍된다.

Partial Prefetching: 클릭 전에 미리 가져온다

두 번째 기능인 Partial Prefetching은 화면에 보이는 링크에 대해 클릭이 일어나기 전에 미리 그 껍데기 화면을 가져와 두는 역할을 한다. 같은 라우트로 이어지는 여러 링크는 하나의 껍데기 화면을 재사용하기 때문에 중복 요청도 줄어든다. 두 기능이 합쳐지면서 사용자가 링크를 클릭하는 순간 이미 준비된 화면이 곧바로 나타나는 경험이 만들어진다.

설정은 두 줄로 충분하다

이 기능을 켜는 절차 자체는 간단하다. next.config.ts에서 cacheComponents와 partialPrefetching 옵션을 true로 지정하면 된다. 다만 옵션을 켜는 것과, 실제로 체감할 수 있는 반응성을 만들어내는 것은 별개의 문제다 — 기존 라우트 구조에 따라 추가 작업이 필요할 수 있다.

실전 마이그레이션 체크리스트

가장 느리게 느껴지는 라우트부터 찾는다

전체 앱을 한 번에 전환하려 하기보다, 사용자가 가장 자주 오가면서도 로딩 지연을 크게 체감하는 라우트를 먼저 골라 적용하는 편이 효과를 빠르게 확인하는 데 유리하다. 목록에서 상세 페이지로 넘어가는 흐름처럼 클릭 빈도가 높은 구간이 우선순위가 된다.

캐시할 데이터와 캐시 수명을 함께 정한다

데이터 조회 함수에 캐시 지시어를 붙일 때는 단순히 캐시 여부만 정하는 게 아니라, 그 데이터가 얼마나 자주 바뀌는지에 맞춰 캐시 수명을 함께 설계해야 한다. 자주 바뀌는 데이터를 너무 길게 캐시하면 사용자가 오래된 정보를 보게 되고, 반대로 거의 바뀌지 않는 데이터를 매번 새로 가져오면 Instant Navigations의 이점이 줄어든다.

변경 작업 이후 캐시 무효화 지점을 빠짐없이 챙긴다

데이터를 수정하는 액션이 있다면, 그 변경이 영향을 주는 모든 캐시 태그를 무효화 처리해야 화면 간 데이터 불일치를 막을 수 있다. 예를 들어 게시글 하나를 수정했는데 목록 화면과 상세 화면 중 한쪽 캐시만 갱신되면, 사용자가 화면을 오갈 때 서로 다른 데이터를 보게 되는 문제가 생긴다.

회귀 테스트로 즉시 반응 여부를 검증한다

Next.js는 프리페치된 화면이 실제로 즉시 표시되는지 검증할 수 있는 테스트 헬퍼를 함께 제공한다. 이런 도구를 활용해 이후 코드 변경으로 반응성이 다시 느려지는 회귀가 생기지 않았는지 자동으로 확인하는 절차를 마이그레이션 초기에 마련해두는 편이 안전하다.

주의할 점

모든 링크에 즉시 반영 옵션을 남발하지 않는다

특정 링크에 URL별 데이터까지 미리 가져오도록 설정할 수 있는 옵션이 있는데, 이를 화면에 보이는 모든 링크에 무분별하게 적용하면 사용자가 아직 클릭하지도 않은 페이지에 대한 서버 요청이 과도하게 늘어날 수 있다. 실제로 클릭될 가능성이 높은 핵심 동선에만 선별적으로 적용하는 편이 서버 부하와 반응성 사이의 균형을 맞추는 데 유리하다.

오프라인 재시도 기능은 아직 실험 단계다

연결이 끊겼을 때 요청을 자동으로 재시도하는 기능이 함께 소개됐지만, 이 기능은 아직 실험적인 단계로 프로덕션 환경에는 권장되지 않는다. 실서비스에 곧바로 적용하기보다 우선 내부 테스트 환경에서 동작을 검증해보는 것이 안전하다.

정리

Instant Navigations는 Cache Components로 즉시 보여줄 화면을 준비하고, Partial Prefetching으로 클릭 전에 그 화면을 미리 가져오는 두 기능의 조합으로 만들어진다. 전체 앱을 한 번에 바꾸기보다 체감 지연이 큰 라우트부터 점진적으로 적용하고, 캐시 수명과 무효화 지점을 꼼꼼히 설계하며, 회귀 테스트로 반응성을 계속 검증하는 순서로 접근하는 것이 실무에서 안정적인 도입 방법이다.