React에서 Next.js 15로의 여정: SEO와 개발 경험 개선

기존 React로 구축된 웹사이트를 Next.js 15로 전환하는 과정은 단순히 기술 스택을 바꾸는 것 이상의 의미를 가졌습니다. 특히 SEO의 중요성을 체감하고, 렌더링 방식의 변화와 App Router의 도입을 통해 개발 경험과 사용자 경험 모두를 향상시키는 중요한 계기가 되었습니다.

왜 Next.js로 전환했는가? SEO의 중요성

기존 React 웹사이트는 클라이언트 사이드 렌더링(CSR) 방식으로 동작했습니다. 전환을 고려하게 된 결정적인 계기는 기업과의 미팅에서 얻은 경험 때문입니다. 4개월 만에 MAU 10만을 달성한 웹사이트 담당자로부터 SEO를 통한 유입 비율이 매우 높다는 이야기를 들었습니다. 빠르게 성장하는 그들은 SEO 전문가와 긴밀하게 협력하고 있었고, SEO의 중요성을 다시 한번 깨닫게 해주었습니다.

CSR 환경에서도 SEO 문제를 해결하는 방법은 존재합니다. AWS에서 직접 구현하거나, Prerender.io 같은 서비스를 이용할 수도 있습니다. 하지만 정적 사이트 생성(SSG)을 활용하는 것이 가장 효율적인 해결책이라고 판단했습니다. 개인적으로 React의 CSR과 가장 유사한 개념은 Next.js의 SSG와 증분 정적 재생성(ISR)이라고 생각합니다. 초기 로딩 속도는 매우 빠르면서도 컨텐츠 업데이트 주기에 따라 동적인 부분도 어느정도 커버가 가능하기 때문입니다.

다른 대안들의 고려: Remix와 Shadcn/ui

초반에는 Remix를 진지하게 고려했습니다. 하지만 당시 React Router v7은 MUI와의 호환성에 여러 문제가 있었습니다. 프로젝트에서 MUI의 풍부한 컴포넌트들을 최대한 활용하고 싶었기 때문에, MUI 호환성 문제는 큰 걸림돌이었습니다.

Shadcn/ui도 검토 대상 중 하나였습니다. 매력적인 UI 라이브러리였지만, 프로젝트에 필요한 컴포넌트의 구성이나 개수가 충분하지 않다고 판단했습니다. 결국 기존에 익숙하고 다양한 기능을 제공하는 MUI를 계속 사용하는 것이 개발 속도와 유지보수 측면에서 유리하다고 결론지었습니다.

이러한 고민 끝에 SEO 문제 해결과 기존 기술 스택과의 호환성을 고려하여 Next.js 15를 선택하게 되었습니다.

렌더링 방식의 변화 (Next.js 15)

Next.js는 다양한 렌더링 방식을 제공합니다.

서버 사이드 렌더링 (SSR): 매 요청마다 서버에서 페이지를 렌더링합니다. 동적인 컨텐츠에 적합합니다.
정적 사이트 생성 (SSG): 빌드 시점에 페이지를 렌더링합니다. 정적인 컨텐츠에 적합하며, 매우 빠른 성능을 제공합니다.
증분 정적 재생성 (ISR): SSG와 유사하지만, 특정 시간 간격으로 페이지를 다시 생성하여 컨텐츠를 최신 상태로 유지할 수 있습니다.
클라이언트 사이드 렌더링 (CSR): 기존 React와 동일하게 클라이언트에서 페이지를 렌더링합니다.

저희는 웹사이트의 특성에 맞춰 SSR과 SSG를 적절히 활용하여 성능을 최적화했습니다. 예를 들어, 자주 업데이트되지 않는 블로그 포스트는 SSG로 생성했습니다. SSR 사용을 최대한 자제하고, SSG로 API 불러서 SSG ISR로 변경하는 방식을 택합니다. SSR은 서버리스라서 최대한 자제하고 비용이슈가 언제든 생길 수 있습니다. 반면 CDN은 그나마 DDOS에 안전하기 때문에 SSG ISR을 개인적으로 추천드립니다.

App Router의 도입 (Next.js 13 이상)

Next.js 13에서 도입된 App Router는 이전 Pages Router와는 다른 방식으로 라우팅을 처리합니다. app 디렉토리 내에 파일을 구성하여 컴포넌트를 정의하고, 폴더 구조를 통해 라우팅을 관리합니다.

[slug] 를 최대한 활용해서 개발을 진행했습니다. 불편한 점이 많지만 결국 디렉토리의 수를 너무 늘리기 싫었기에 어쩔 수 없는 선택입니다. 이미 합격자 수에 대한 SEO 를 SSG로 만들어야하는 페이지수가 200개가 넘기 때문에 어쩔 수 없는 선택입니다.

컴포넌트 기반 레이아웃: 레이아웃 컴포넌트를 사용하여 페이지의 공통 레이아웃을 쉽게 관리할 수 있습니다.
중첩 라우팅: 폴더 구조를 통해 중첩된 라우팅을 직관적으로 구현할 수 있습니다.
서버 컴포넌트: 서버에서만 실행되는 컴포넌트를 사용하여 데이터 fetching 및 로직을 서버에서 처리할 수 있습니다. 이를 통해 클라이언트 사이드 JavaScript의 양을 줄이고 성능을 향상시킬 수 있습니다.
스트리밍: 서버 컴포넌트에서 데이터를 스트리밍 방식으로 클라이언트로 전송하여, 사용자는 컨텐츠를 점진적으로 확인할 수 있습니다.

App Router를 통해 더욱 효율적인 개발과 향상된 사용자 경험을 제공할 수 있게 되었습니다.

결론

React에서 Next.js 15로의 전환은 웹사이트의 성능, SEO, 개발 생산성 등 여러 측면에서 긍정적인 결과를 가져왔습니다. 특히 SEO의 중요성을 깨닫고, 렌더링 방식의 변화와 App Router의 도입을 통해 얻은 경험은 매우 값진 것이었습니다. 앞으로도 Next.js의 새로운 기능들을 적극적으로 활용하여 웹사이트를 더욱 발전시켜나갈 계획입니다.