복잡해져가는 Next.js와 React를 웹 프론트엔드 개발자가 알아야하는 이유

머리말

회사 앱을 개발하면서나 취준 시절에도 Next.js가 등장한 이후부터는 줄곧 Next.js를 사용해왔습니다. 현재 React 시장에서 독보적인 존재감을 떨치고 있는 React 프레임워크 Next.js는 13버전부터 아키텍처 변화를 감수하면서까지 빅뱅에 가까운 업데이트를 강행했는데요. 부끄럽지만 그 당시엔 그리고 공부하기 이전의 최근까지도 왜 Page router에서 App router로 패러다임을 변경했는지, 서버사이드 렌더링이 정확히 무슨 이점이 있는지 사실은 정확히 모른채 개발에만 몰두하곤 했습니다. 그러다 마침 여유롭게 탐구할 수 있는 시간이 생겨 그간 놓치고 있던 흐름을 파악할 수 있게 되었고, 그 깨달음을 늦게나마 공유하고자 합니다.

이 글을 읽으시는 분들은 현대 웹 프론트엔드가 서버 HTML 서빙방식에서 구글의 Ajax와 V8엔진의 발명으로 클라이언트 사이드 렌더링 방식이 주류가 되었고 그 선봉장으로 React가 군림해온 지난 날에 대해 잘 알고 계시리라 생각합니다. 문제는 그 다음인데요, 아무래도 역사가 실시간으로 쓰이고 있었기 때문에 저처럼 경험이 부족한 주니어들은 지금 당장 눈앞에 놓인 것들을 해치우기에도 시간이 모자라 개발 트렌드가 어떻게 형성이 되고 있는지 파악하기 어려웠을 것이라 생각합니다.

저 역시도 마찬가지였습니다. 개발 트렌드는 지금 당장 기능 개발하는데 필수 요건이 아니었고, 신규 기술들을 몰라도 전혀 문제가 없었으며 이들 대다수는 experimental했어서 사용하기도 부적절했으니까요. 그래서 남 일 보듯 등한시했고, 정식 기능으로 출시된 뒤에도 후숙되기만을 기다렸던 것 같습니다.

문제는 시간이 지날수록 벽에 막혀있다는 느낌이 계속 들었다는 것입니다. 매번 쓰는 기능들만 쓰고, 문제들을 비슷한 방식으로 풀기를 반복하고 있다는 느낌을 받기 시작했습니다. 소위 컴포트 존(Comfort Zone)에 진입했다는 것을 체감했습니다. 그래서 위기의식에 소스코드에 적용되어있지 않은 기능들을 하나씩 살펴보기 시작했어요. Suspense는 UI 렌더링이 완료되지 않으면 fallback을 자동으로 보여준다니까 써볼만한데? 만만하다고 생각해서 덤볐습니다만 이내 Suspense라는 녀석 뒤에 무언가 알 수 없는 거대한 존재감을 느꼈습니다. 그냥 쓰면 안될 것 같은데? Suspense 사용은 뭔가와 강력하게 연결돼있는 것 같은데?

그래서 디깅을 하다보니 결국 Suspense는 단순히 UI fallback 처리에서 끝나지 않고 컴포넌트 단위로 Streaming을 하는 Streaming SSR(Server Side Rendering) 기법의 중책을 맡고 있는 녀석이었다는걸 알게 되었습니다. 이 연결된 흐름을 알게되니 비로소 그제서야 이 기능이 왜 그렇게 장안의 화제고, 왜 써야하는지에 대한 이유에 대해 자연스럽게 이해가 되더라구요. 여러모로 업무 외 시간에 추가 공부하는 것의 중요성, 이점에 대해 체감하는 요즘이었습니다.

웹 개발 주제에 뭐가 이렇게 복잡해?

Next.js가 App router로 변경되면서 주위에서 들었던 가장 대표적인 반응이었습니다. 저도 같은 생각이었구요. 처음에 서버사이드 렌더링을 접하고, 파생되는 ISR(Incremental Static Regeneration)이나 SSG(Static Site Generation)를 마주했을 때 다시금 수능공부를 하는 것 같은 기시감이 들었습니다. 그 땐 취준생이어서 더욱 암기의 압박을 느꼈던 것 같아요. 뭐가 뭔지 정확히 모른채로요.

확실히 서버사이드 렌더링이 프론트엔드의 next step이 되고 나서부터는 복잡도가 올라갔다고 생각합니다. 특히 초보자 입장에서는 아직 서버와 클라이언트 구분도 잘 안되는데 이 과정은 서버에서 하고 저 과정은 브라우저에서 한다는게 와닿기가 쉽지 않을 것입니다. 그러나 이 기초를 이해하기만 하면 이들이 무엇을 얻고자 이렇게 시도하는지를 알 수 있게 되고 곧 자신의 손에 쥘 수 있는 무기가 많아질 것이라고 생각합니다.

프론트엔드 개발자들은 클라이언트 사이드 렌더링에 안주하지 않았습니다. 복잡하고 현란한 인터랙션이 CSR(Client Side Rendering)로 하여금 가능해졌지만, 모든 것에는 트레이드오프가 있듯이 인터랙션을 위한 자바스크립트 번들의 사이즈가 비대해지고, 웹 성능이 저하되는 문제가 생겼습니다.