Next.js 13.4+ App Router 도입 고민 (feat. styled-component)

(25.01.10 기준) Next.js latest version 은 15.1.4 이다.

마지막으로 사용한게 12 버전이었고, 현재 재직하고 있는 곳에서 13 버전을 사용하고 있어 그 사이 주요 변화를 알아보려한다.

 

https://nextjs.org/blog/next-13-4

 

주요하게 볼 점은 공식문서에서 13.4를 기준으로 App Router 방식을 Stable로 지정했듯이, app 단위로 컴포넌트와 page를 함께 관리할 수 있다는 것이다. (여전히 구 Pages Router 방식도 제공) 그리고 페이지 단위가 아닌 컴포넌트별로 렌더링 방식을 최적화할 수 있다.

 

하지만, 레포에 적용하려고 보니 다음과 같은 에러를 만났다.

 

 

스타일 라이브러리로 styled-component를 사용하고 있는데, 내부적으로 createContext 를 사용하고 있어 추가 작업이 필요하다는 것이다. [nextjs issue]

https://react.dev/reference/rsc/use-client#using-third-party-libraries

 

 

그래서

- 우선 임시방편으로 모든 페이지 상위에 `use-client`를 사용해서 전부 Client Components 로 간주했다.

- 공식 방법 (시도 필요)

공식에서는 StyledComponentsRegistry 컴포넌트를 정의해서 해결했다.

(Styled component에서 제공하는 ServerStyleSheet를 활용해 정의된 모든 스타일을 수집하고, 페이지가 렌더링되기 전에 props와 styles를 채워준다. 수집된 스타일은 getStyleElement 메소드로 <style> 태그에 감싸져 head에 뿌려지게 된다.)

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

https://seonghui.github.io/blog/2020/07/26/next-styled-components/

 

 

이때 궁금해진게 있다.

 

Q. 그럼 전부 Client Components 로 바뀌었으면 SSR은 못 사용하는 것인가?

A. 우선은, 아니다. 간단히 'use client'를 붙여서 실행을 해보면, 다음과 같이 HTML 내용이 담긴채로 렌더링된 것을 확인할 수 있다. 이는 Next.js 가 기본적으로 제공하는 pre-rendering 기능 덕분이라고 한다.

 

Q. 그럼 React Server Components != ServerSide Rendering 인 것 같은데, 도대체 어떤 의미일까?

A. 우선 RSC 와 RCC 차이는 렌더링 위치이다. RSC는 서버에서 진행되기 때문에, 사전에 데이터를 fetching 하고 JS 크기를 감소시킬 수 있다. 그럼 RSC vs SSR 차이는? 우선 두개는 별개의 개념이다. 작성한 컴포넌트가 실행되어 데이터가 해석되고, 다시 HTML 로 변환되는 과정 중에 전자가 RSC 역할, 후자가 SSR 역할인 것이다. 택1 이 아니라, 두 개념을 사용해 렌더링 과정을 더 최적화 할 수 있다. [출처] 

 

정리하자면 Nextjs 에서 제공하는 App Router는  페이지 단위로 렌더링을 최적화하는 Page Router와 달리 컴포넌트별로 최적화할 수 있고 잘 사용하려면, 주의가 필요하다. (예로 RCC 하위에는 RSC 가 있을 수 없음)

https://choi-hyunho.com/nextjs-server-component

 

 

다시 돌아와, 본 과제에 적용을 하려고 보니 app router 의 장단점이 느껴졌다.

 

 

장/단점

• app 단위로 페이지, 로직, 뷰 한꺼번에 관리할 수 있다 / 그만큼 한 곳에 여러 관심사들이 섞여서 directory 정의가 구조가 중요하다.
• 세밀하게 렌더링을 최적화 할 수 있다 / 하지만 적용을 편하게할 수 있는 Template & Tools Set 찾는 초기 투자 필요
  • ex) 사내 레퍼런스 스타일링 라이브러리: emotion/styled -> @vanilla-extract/css

 

 

그 외 참고 자료

• App Router vs Pages Router - https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90
• SSG vs SSR - https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SSGStatic-Site-Generation-feat.-NEXT%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C
• Nextjs 렌더링 실험 - https://haesoo9410.tistory.com/404
• RSC vs SSR - https://jk6722.tistory.com/entry/RSC-vs-SSR
• Migration vanilla-extract in Next.js - https://yong-nyong.tistory.com/92