[모클리] Next13 을 선택한 이유

로고를 누르면 모클리로 이동합니다!

개요

모클리는 요즘 프론트엔드 프레임워크로 핫한 기술인 Next13을 채택했습니다. Next13으로 결정한 이유와 실제로 개발을 진행하며 느낀 장점들에 대해 포스팅합니다.

모클리는 왜 Next13을 선택했을까?

App Router

Next13의 App directory를 사용하며 좀 더 직관적인 구조를 가져갈 수 있었습니다. 기존에 pages 폴더와 route 파일을 분리했던 방식과 달리 이를 그룹화하고 특히 loading.tsx, error.tsx를 통해 라우트의 Suspense, 에러 바운더리를 정의해서 보다 직관적이고 유지보수가 용이해질 수 있었습니다. 

SSR, SEO

먼저 Next13의 주요 특징이라고 할 수 있는 SSR과 SEO(검색 엔진 최적화)입니다. 모클리는 1인 제조 셀러와 제조 공장을 이어주는 플랫폼입니다. Next13의 SSR을 통해 페이지 속도를 최적화하고, SEO에 강점이 있다는 특징을 활용해 사용자에게 조금이라도 더 노출되도록 구현하고 싶었습니다.

Image, Font, Link 태그

모클리는 많은 이미지와 제품 정보를 다루기 때문에, 이미지 최적화 기술이 중요했습니다. next/Image는 Visaul Stability(Cumulative Layout Shift 방지)와 Faster Page Loads(이미지가 뷰포트 내에 들어올 때만 로딩)을 자동으로 적용시켜줍니다.

Cumulative Layout Shift란?
사이트의 레이아웃 안정성을 측정하기 위한 지표입니다.

CLS는 core web vitals를 구성하는 3가지 요소 중하나로, SEO에 중요한 의미를 가지며 사용자가 서비스를 이용하던 중 레이아웃이 바뀌면 사용자 경험을 해칠뿐만 아니라 오동작을 유발할 수 있습니다. 이러한 Layout shift는 DOM 요소가 초기 렌더링 이후 동적으로 추가되거나, 리소스가 비동기식으로 로드되기 때문에 동작합니다.

 

Font태그도 CLS에 이점이 있는데요, next/font는 Google 폰트를 편리하게 사용할 수 있도록 도와줍니다. 폰트 파일은 CSS 파일과 함께 빌드 타임에 다운로드되어 타 정적 자산들과 함께 자체 호스팅됩니다. (브라우저에서 Google로 요청이 전송되지 않음) 무엇보다 CSS의 size-adjust 속성을 사용해 웹 폰트를 최적화해주는데, Layout Shift를 방지해줍니다.

 

Turbopack

웹팩 개발자가 vercel에서 Rust를 사용해 만든 빌드 도구입니다. 웹팩보다 700배, vite보다 10배 빠르다고 합니다.

X의 Evan You님(@youyuxi)

저희가 집중한 부분은 HMR인데요, Turbopack이 vite보다 10배까지는 아니지만 빠르긴 빠르다...고 말하고 있습니다. 하지만 개발자 입장에서 HMR이 0.1초라도 빠르다면 체감할 수 있으며 개발자 경험에 영향을 준다고 생각합니다. 그리고 vite의 HMR이 씹히는 현상과 Context Provider 사용시 HMR이 동작하지 않는 이슈도 경험해봐서 (현재는 버전 업데이트를 통해 해결) 사용하고 싶지 않았습니다. 이러한 오류들은 에반유도 어느정도 인지하는 부분이었으며 이는 개발할 때 충분히 불편한 요소 중 하나였습니다.

결론

Next13는 쉽고 빠르게 유지보수하기 좋은 아키텍처로 개발을 진행할 수 있었고, SSR, SEO 작업을 편리하게 진행할 수 있었고 무엇보다 Vite 대비 성능과 안정성이 뛰어난 Turbopack, Automic Code-splitting, Prefethcing, Font와 Image 자동 최적화 등 개발자 경험에서 큰 장점이 있었습니다.