Next.js 후기

Next.js로 서비스를 무사히 오픈했습니다. React.js 프로젝트를 경험했지만 Next.js는 또 다른 세계였는데요. 서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)에 대해 많이 공부할 수 있었습니다. 문서에서도 많이 배울 수 있었지만 실제 서비스를 준비하면서 경험해 본 시행착오를 공유하려고 합니다.

서버사이드 렌더링(SSR)

Next.js의 핵심이라고 할 수 있는 서버 사이드 렌더링인데요. Next.js의 최대의 장점은 SEO 최적화와 빠른 페이지로드 타임이라고 할 수 있습니다. 이 장점을 누리기 위해서는 SSR, CSR에 대한 이해가 필요하고 두 상황을 고려해서 코드를 작성해야 합니다.

  • 렌더링에 전체적인 영향을 주는 데이터는 서버사이드에서 처리하는 것이 좋습니다. 렌더링을 최소화할 수 있으며 유연한 사용자 경험을 제공할 수 있습니다. (예 - 인증 정보, 환율)
  • ip 주소가 필요할 때는 서버사이드에서 x-forwarded-for를 사용하시면 편합니다. (nginx에서 허용해주셔야 합니다.)
  • SEO와 로드타임에 영향을 주지 않는 기능은 프론트에 배치하셔서 서버 부하를 줄이는 것이 좋습니다.
  • getInitialProps은 페이지에서만 사용할 수 있으며 공통 유틸 함수를 만들어서 SSR과 CSR에 맞게 로직을 제어하는 것이 편합니다.

Router

  • Link는 react-router-dom과 다르게 사용합니다.
// react-router-dom
<Link to="/home"></Link>

// next.js
<Link href="/home"><a></a></Link>
  • Next.js는 라우터로 다이나믹 url로 연결하는 경우, as를 쓰면 자동으로 prefetch하는데요. as를 사용하지 않는다면 prefetch={false}를 추가해야 합니다. 이것을 추가하지 않는다면 prefetch할 때 404 오류가 납니다.
  • 라우터로 이동한 화면에서는 getInitialProps가 프론트에서 작동합니다
  • 파라미터만 다른 같은 페이지에 접속할 때, shallow: truegetInitialProps가 다시 작동하는 것을 방지할 수 있습니다.

라이브러리

  • 서버사이드를 고려해야되는 기능이라면 next나 isomorphic이 붙은 라이브러리를 구글링해보시면 됩니다.
  • isomorphic이란 '동형'이라는 뜻을 가지고 있습니다. CSR뿐만 아니라 SSR에서도 사용할 수 있습니다. 대표적으로 isomorphic-fetch, isomorphic-dompurify가 있습니다.

배포

  • 프로덕션에서는 꼭 빌드 후에 스타트를 실행시켜야 합니다.
// 개발 환경
npm run dev

// 프로덕션 환경
npm run build && npm start
  • 빌드 과정에서 메모리가 굉장히 많이 소모됩니다. 계속 빌드를 실패한다면 로그를 확인해보셔요. (참고 링크)

    • yarn으로 작업하고 next-bundle-analyzer로 확인하면서 라이브러리는 최소화합시다.
    • 체감상 t2-small로 돌려야 숨 쉴 수 있습니다.. 😢
  • staging 환경을 따로 제공하지 않기 때문에 따로 구성해야 합니다. (참고 링크)
  • 오토스케일링이 발생하면 번들이 서로 찾지 못하는 현상이 생깁니다.

    • AWS에서 sticky session을 설정하거나 generateBuildId를 제어하면 해결할 수 있습니다. (참고 링크)

참고하면 좋은 글