Next13을 사용하며(2023.08 ver)

배경

프로젝트에 투입되기 1달 전 타 팀 개발자 분들이 신규 프로젝트의 에디터를 개발하면서 기술 스택과 환경들을 구축해놓은 상태였습니다. React, React Query, Sass등 대부분의 기술 스택은 사용해본 경험이 있었지만, Next13은 처음해보는 버전이 였습니다.

React17에서 18로 올라가듯이 일부 기능들이 추가되는 정도라면 문제가 없지만, getStaticProps와 getServerProps가 사라지고, ‘use client’와 app Directory가 추가되는 등 완전히 다루는 방식이 달라졌기 때문에 기대 반 걱정 반 마음으로 프로젝트에 투입되었습니다.

정적과 동적

Next12에서 정적 파일의 경우 getStaticProps, 동적 파일의 경우 getServerProps를 통해서 서버에서 하는 동작 지정을 통해 정적 서버 동작 / 동적 서버 동작 / CSR 동작을 구분해서 작성했습니다.

Next13.1의 App Directory는 fetch의 여부에 따라 페이지의 정적 동적 페이지로 나뉘고, SSR 페이지에서도 컴포넌트에 **‘use client’**를 붙이면 CSR 컴포넌트가 되는 방식을 취하고 있어 개발자에게 더욱 깊은 구조적 고민을 가져와 사용자의 사용성에 대해서 많은 고민을 할 수 있어보였습니다.

App Directory

페이지를 만들다보면 항상 하는 공통적인 처리들이 있습니다. App Directory에서는 Error처리, 404페이지, Layout, 로딩처리 등을 편하게 하도록 도와주고 있습니다. 각 처리들은 페이지 전체적으로 적용할 수도 있고, 필요한 페이지에서만 동작하도록 설정할 수도 있습니다.

조건에 따라 404페이지로 보낼 수 있는 not Found()는 같은 dynamic URL 이더라도 필요에 따라 404페이지를 띄워줄 수 있는 편리함을 가져다주었습니다. Layout은 전체 레이아웃을 유지한채로 또 다른 소규모 레이아웃을 제공해 코드의 재사용성을 높일 수 있었습니다.

전체적으론 편한 방법이였지만, 이러한 방법들에만 의존해서 코딩하다보니 CSR에서 not found() 함수의 미작동 등 낭패를 본 경험들이 있습니다. 이와같이 일부 처리들을 특정 렌더링에서만 동작하는 등의 상황이 발생해서 여러 렌더링 방식에서 동작할 수 있도록 고려해줬다면 좋았을텐데란 생각이 들었지만 전체적으론 긍정적인 경험을 준 방식들이였습니다.

과연 좋기만 했는가?

Next13은 React18로 올라오면서 다양한 문제들을 새로운 구조와 방식의 해결방법이 긍정적으로 느껴졌습니다. 하지만 Next13에서도 당시 Production에서 사용을 자제했듯이 사용하면서 버전 자체적인 문제점들을 겪기 시작했습니다.

이슈로 인해 제대로 활용할 수 없는 렌더링

우선 라이브러리들이 Next13을 제대로 따라가지 못하고 있었습니다. 당시 사용했던 React Query의 경우만해도 초기값을 SSR에서 설정해준 뒤 렌더링을 쌓아가고 싶었지만 아래와 같은 문제점들이 발생하고 있었습니다. Context를 제대로 지원해주지 않아 우회적인 방법을 사용해서 라이브러리들을 사용해야만 했습니다.

React Query initial Data와 SSR 문제점

물론 Next13 자체에서도 불안정한 상황이였습니다.

💡 당시까진 정적 페이지에 대한 issue들이 유지되고 있었습니다 https://github.com/vercel/next.js/issues/48022

일정에 쫓기는 상황에서 라이브러리를 위한 추가 작업을 해주는 것은 비효율적이고, 추후에 변경하기 어려울 수 있단 생각이 들어, SSR쪽 코드를 덜 고려하도록 결정했습니다. 그래서 Next13에서 제공하는 고유의 기능들을 제대로 활용하지 못한 아쉬움이 남았었습니다.