우리가 넥스트 JS의 앱라우터를 현역으로 사용할 수 있을까?

金秀·2023년 8월 13일

넥스트js 번역 앱라우터

번역

목록 보기

1/1

주니어 프론트 개발자로 철저하게 개인적인 필요에 의해 비정기적으로 번역을 합니다.

번역할 때

직역하기 다소 어색한 부분은 *표시로 표시하고 문맥에 맞게 번역한 후, 하단의 번역 노트(glossaries)에 내용을 추가했습니다.
용어는 정보통신용어사전을 참고해서 번역했고, 등재되지 않은 표현 중에 원어 대로 번역하는 것이 자연스러운 경우도 **표시와 함께 번역 노트(glossaries)에 남겼습니다.

번역 소스

https://engineering.udacity.com/what-is-next-js-app-router-is-it-ready-for-the-main-stage-bed07ef9519f

우리가 넥스트 JS의 앱 라우터를 현역*으로 사용할 수 있을까?

들어가면서

최근에 Next.js가 13.4 버전에서 앱 라우터(App Router)를 정식으로 릴리즈했습니다. 앱 라우터는 Next.js 애플리케이션을 구축할 수 있는 새로운 패러다임으로 이전 베타 버전에서는 "App Dir"으로 불렸습니다. Next.js 13 버전의 앱 라우터는 커뮤니티의 관심을 끌만한 향상된 개선 사항들이 추가되어 있습니다.

필자는 비교적 일찍 Next.js 앱 라우터를 채택해서 써 왔고, 향상된 개발자 경험과 렌더링 성능*에 만족하고 있습니다.

앞으로도 개인 사이드 프로젝트는 무조건 Next.js 앱 라우터를 사용할 생각이긴합니다만, 정식으로 릴리즈된 앱 라우터를 과연 규모 있는 프로덕션 프로젝트에 실제로 사용해도 괜찮을까요?

앱 라우터의 기능

이 질문에 대답하기 전에, 기존의 페이지 라우터(pages router)와 비교해서 앱 라우터의 어떤 점이 매력적일지 한번 살펴보겠습니다.

✨ 리액트 서버 컴포넌트(React Server Components)

앱 라우터의 가장 눈에 띄는 점은 바로 React의 새로운 서버 컴포넌트(Server Component) 아키텍처를 사용한다는 것입니다. 두둥~!!

이전에 리액트가 UI 구축에 대한 우리의 사고 방식을 전환한 것과 비슷하게 리액트는 리액트 서버 컴포넌트(RSC)를 통해 서버와 클라이언트를 모두 활용한 하이브리드 애플리케이션은 어떻게 구축을 할 수 있는지 보여줍니다.

서버 컴포넌트를 사용하면 렌더링 중에도 서버에서 실행되는 컴포넌트를 정의하고, 그 업데이트를 클라이언트에 스트리밍(streaning)할 수 있습니다. 이를 통해서 초기 로드 시간이 개선되고, 자바스크립트 번들 크기도 줄어들고, SEO도 개선됩니다.

✨ 스트리밍과 서스펜스(Streaming and Suspense)

방금 언급한 것처럼 서버 컴포넌트는 클라이언트로 업데이트를 스트리밍합니다. 그래서 초기 페이지 로딩이 훨씬 빨라지고, 사용자들은 전체 페이지가 로딩될 때까지 기다리지 않고도 페이지를 사용할 수 있습니다*.

위의 코드는 React Suspense를 사용한 서버 컴포넌트를 활용하는 예를 보여줍니다. Posts 컴포넌트는 초기 로딩 state 때에 PostListSkeleton을 렌더링합니다. 그 후 PostList 컴포넌트가 어떻게 비동기적으로 실행되는지 유심히 봐 주세요. 프로미스(Promise)가 성공적으로 처리되고 나면*, 렌더링된 컴포넌트가 클라이언트에 스트리밍되면서 로딩 state를 대체합니다.

그럼 가장 큰 장점은 뭘까요?
클라이언트로 더이상 데이터 fetching을 하지 않아도 됩니다! 더!이!상! useEffect로 데이터를 가져올 필요도 없고, 직관적이지 않은 데이터 fetching 라이브러리도 필요 없습니다. 이제 모든 데이터는 서버에서 바로 옵니다. Next.js는 여기에 Fetch을 모킹*해서 중복 요청을 줄이는 캐싱 기능까지 추가했습니다. 이로써 기본 Fetch API를 사용해서 컴포넌트에 필요한 데이터를 바로 가져올 수 있습니다.

✨ 서버 액션(Alpha)

Next.js는 13.4부터 서버 액션이라는 개념을 도입합니다. 이는 클라이언트에서 직접적으로 서버의 뮤테이션(mutations)을 처리하게 해줍니다. 서버 액션은 데이터 수명 주기(life cycle)에 직접적으로 관여해서* 한 번의 네트워트 통신으로 데이터를 수정하고, 기존 캐시된 데이터를 재검증(revalidate)한 후 페이지를 다시 렌더링할 수 있게 해줍니다.

-TBC-

✨ Nested Routes & Layouts

✨ Built-in SEO

Ready for production?

Conclusion

번역 노트 glossaries

the main stage 현역
What is Next.js App Router & Is it ready for the main stage
의역함
우리가 넥스트 JS의 앱 라우터를 현역*으로 사용할 수 있을까
mental model 개념, 멘탈 모델
with the improved developer experience, rendering performance, and mental model that comes with it.
의역으로 멘탈 모델 부분은 번역하지 않았음.직역하자면
향상된 개발자 경험, 렌더링 성능 (및 함께 제공되는 멘탈 모델)에 만족하고 있습니다.

멘탈모델(Mental Model)이란 사람들이 자기 자신, 다른 사람, 환경, 자신이 상호작용하는 사물들에 대해 갖는 모형이다. 사람들은 멘탈모델을 경험, 훈련, 지시를 통해 형성한다. 한 도구의 멘탈모델은 주로 그 장치의 작용과 가시적 구조를 지각하고 해석함으로써 형성된다

3.스트리밍 stream updates to the client
Next.js에서 "스트리밍(streaming)"은 Next.js 서버 컴포넌트가 페이지가 완전히 로딩될 때까지 기다리지 않고 업데이트를 점진적으로 클라이언트로 보낼 수 있는 기능 https://nextjs.org/docs/app/building-your-

application/routing/loading-ui-and-streaming

4.start interacting with the page
직역 사용자들은 페이지와 상호작용(인터렉션)을 시작할 수 있습니다
의역 사용자들은 전체 페이지가 로딩될 때까지 기다리지 않고도 페이지를 사용할 수 있습니다

5.Once the promise resolves
resolve 되었다는 것은 비동기 처리가 성공한(fulfilled) 상태이기 때문에 프로미스(Promise)가 성공적으로 처리되면 로 번역함

6.even monkey patched
몽키 패치
몽키패치는 원래 소스코드를 변경하지 않고 실행 시 코드 기본 동작을 추가, 변경 또는 억제하는 기술이다. 쉽게 말해 어떤 기능을 위해 이미 있던 코드에 삽입하는 것이다
Next.js는 여기에 더해 "Fetch"을 모킹해서 중복 요청을 줄이는 캐싱 기능까지 추가했습니다.
몽키 패칭했다고 직역하지 않고 모킹(mocking)으로 의역함

Server Actions integrate with the rest of the data lifecycle
직역 서버 액션은 나머지 데이터 수명 주기와 통합되며
의역 서버 액션은 데이터 수명 주기에 직접적으로 관여해서
rest of를 굳이 번역하지 않았고 뒷 부분에서 처리하는 일을 보면 서버 액션이 주어일때 통합된다는 직역 보다 관여해서 라는 표현이 자연스러워서 보여서

공부한 키워드

규모있는 프로덕션 레벨 프로젝트에 필요한 것은 누가 어떻게 결정할 것인가?
찾아보니 Applications Architect 라는 애플리케이션에 대한 표준 가이드와 아키텍쳐 구조를 담당하는 role이 따로 있음. 프로젝트 시스템 구조를 설계하는 포지션으로 보임
https://www.redhat.com/ko/topics/cloud-native-apps/what-is-an-application-architecture
리액트의 서버 컴포넌트
개념을 이해하는데 learning curve 가 높다고 생각한다. 아직 실제로 사용한 use case도 많지 않고 docs만 존재하는 것도 이유인 것 같다. 기존의 리액트에 서버 개념을 끼얹는 혁신적인(?) 내용이라서 리액트 커뮤니티 안에서도 의견 분분함

참고 자료

정보통신용어사전 http://terms.tta.or.kr/dictionary/searchFirstList.do
넥스트 App Router docs https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#server-actions

金秀

기록하기