𝗛𝗼𝘄 𝗪𝗲 𝗖𝘂𝘁 𝗦𝗹𝗼𝘄 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗲𝘀 𝗯𝘆 𝟴𝟬%

Subito is a top marketplace in Italy. We handle thousands of requests every minute. Our ad detail page is vital for SEO and revenue.

We moved this page from Next.js Pages Router to App Router. We did not stop product work to do this. We moved in small steps.

Here is how we did it.

𝗧𝗵𝗲 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵

We used an incremental strategy. We added the App Router tree alongside the old Pages Router. This let us ship new features while we migrated.

We used Server Components to own data fetching. This removed the need to pass data through many layers. We also created a Data Access Layer. This made sure we only fetch data once per request.

We used Suspense and the use() hook to enable HTML streaming. This shows a skeleton screen while data loads. The user sees the page faster.

𝗧𝗵𝗲 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲𝘀

Problem 1: HTTP 410 Gone Search engines need a 410 status when a page is permanently removed. The App Router does not have a built-in way to send this. We solved this using our Express server. The server intercepts the response and changes the status code.

Problem 2: HTML Streaming We found that our loading skeletons did not appear. The page stayed blank for seconds.

We discovered that Nginx and Akamai were buffering our responses. If the CDN buffers the HTML, streaming fails. We had to turn off buffering in Nginx and apply custom settings in Akamai. Once we fixed this, content streamed to the user perfectly.

𝗧𝗵𝗲 𝗥𝗼𝗹𝗹𝗼𝘂𝘁

We rolled out in two phases to protect our SEO.

Phase 1: We moved traffic to the App Router but kept streaming off. We did this one category at a time.

Phase 2: We enabled HTML streaming. We tested this on small categories first. Our SEO team monitored rankings for two weeks before we moved to the next category.

𝗧𝗵𝗲 𝗥𝗲𝘀𝘂𝗹𝘁𝘀

The results were huge. Before the migration, up to 40% of our responses were slow. After the migration, slow responses dropped by 80%.

Most pages now load in under 500ms.

𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀

Next.js App Router로 마이그레이션하여 느린 응답을 80% 단축한 방법

우리는 최근 Next.js App Router로 마이그레이션하면서 느린 응답(slow responses)을 80%나 줄일 수 있었습니다. 이 글에서는 우리가 직면했던 문제와 이를 어떻게 해결했는지, 그리고 App Router가 왜 그 해결책이 되었는지에 대해 공유하고자 합니다.

문제점: 느린 응답과 사용자 경험 저하

우리의 기존 애플리케이션은 Pages Router를 사용하고 있었습니다. 서비스가 성장함에 따라 몇 가지 심각한 성능 문제가 발생했습니다.

1. 거대한 자바스크립트 번들

모든 페이지가 클라이언트 사이드 하이드레이션(hydration)을 위해 많은 양의 JS를 다운로드해야 했습니다. 이는 특히 저사양 기기나 느린 네트워크 환경을 사용하는 사용자들에게 치명적이었습니다.

2. 데이터 페칭 워터폴(Waterfall)

컴포넌트 계층 구조에 따라 데이터 요청이 순차적으로 발생하여 전체 로딩 시간이 길어졌습니다. 부모 컴포넌트의 데이터가 로드될 때까지 자식 컴포넌트의 데이터 요청이 시작되지 못하는 현상이 발생했습니다.

3. 높은 TTFB (Time to First Byte)

서버에서 페이지 전체를 렌더링할 때까지 클라이언트는 아무것도 받지 못하고 기다려야 했습니다.

해결책: Next.js App Router로의 전환

우리는 이 문제를 해결하기 위해 Next.js의 App Router로 마이그레이션을 결정했습니다. App Router는 단순히 라우팅 방식의 변화가 아니라, 렌더링 모델의 근본적인 변화를 의미합니다.

React Server Components (RSC) 활용

App Router의 핵심은 React Server Components입니다. 이를 통해 우리는 다음과 같은 이점을 얻었습니다:

Streaming과 Suspense를 통한 체감 성능 향상

기존 Pages Router에서는 페이지 전체가 준비될 때까지 사용자가 빈 화면을 보아야 했습니다. 하지만 App Router에서는 Streaming을 사용할 수 있습니다.

Suspense를 사용하여 데이터 로딩이 오래 걸리는 부분은 스켈레톤(skeleton) UI로 대체하고, 준비된 부분부터 즉시 사용자에게 보여줌으로써 체감 성능(perceived performance)을 크게 개선했습니다.

개선된 데이터 페칭 및 캐싱

App Router는 fetch API를 확장하여 강력한 캐싱 메커니즘을 제공합니다. 이를 통해 동일한 데이터에 대한 중복 요청을 방지하고, 서버 측에서 데이터를 효율적으로 관리할 수 있게 되었습니다.

결과

마이그레이션 결과는 놀라웠습니다:

결론

Next.js App Router로의 전환은 단순한 기술 스택의 업데이트가 아니었습니다. 이는 사용자에게 더 빠르고 매끄러운 경험을 제공하기 위한 전략적인 선택이었으며, 그 결과는 수치로 증명되었습니다.

만약 여러분의 애플리케이션이 데이터 페칭 워터폴이나 거대한 JS 번들로 인해 성능 저하를 겪고 있다면, App Router로의 마이그레이션을 적극 고려해 보시기 바랍니다.