https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/
https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/
글들을 읽어보니 Next.js는 Server Side Rendering보단 Static Site Generation에 더 힘을 쏟는 것 같다. 하긴 SSR은 전통적인 개념이고 필요한 기능도 Next.js에서 이미 다 완성되었으니...
아래는 Next.js 9.3 업데이트를 팀에게 공유한 이메일.
안녕하세요 김명재입니다.
예지님의 리액트 버전 알림글에 자극을 받아.. 저도 Next.js 버전 릴리즈 내용을 정리해봤습니다.
저번달 10일에 Next.js 9.3(https://nextjs.org/blog/next-9-3)이 릴리즈되었습니다. Static Site Generation(SSG) 기능 강화와 Built-in sass가 가장 눈에 띕니다.
SSG는 익히 저희 모두 잘 알고있듯이 빌드 결과물을 static파일(html, css, js등)로 뽑아내어 S3등의 static 파일 제공 서비스를 통해 호스팅할 수 있는 사이트를 만들어내는 것입니다.
페이지 컴포넌트에 SSG를 위한 api 2개와 Server Side Rendering(SSR)을 위한 api 1개가 추가되었습니다.
- getStaticProps (SSG): 빌드할 때 데이터를 fetch함.
- getStaticPaths (SSG): dynamic routes (예: /pages/titles/[id].tsx)가 적용된 페이지에 데이터(id)를 제공. 제공된 데이터마다 페이지가 생성됨.
- getServerSideProps (SSR): 무조건 서버를 통해 데이터를 fetch함.
getInitialProps의 경우 클라이언트와 서버 모두에서 실행되지만 getServerSideProps의 경우 서버에서만 실행됩니다(https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side).
getInitialProps는 계속 지원하지만, 새로 추가된 위의 API들을 사용하도록 권장하고 있습니다. getServerSideProps가 getInitialProps를 완전히 대체하지는 않습니다. getInitialProps를 depreacte하기는 쉽지 않아 보이며 그럴 계획도 없는 것 같습니다.
Next.js의 트렌드가 SSR보다는 SSG의 강화로 기울어지고 있습니다. 전통적인 frontend-backend 모델 대신 serverless 모델을 권장하고 있습니다. 다이나믹한 데이터에 대해 검색 엔진 최적화(SEO)를 하기 위해서는 SSR이 필수겠지만 저희 admin같이 SEO가 필요없는 상황에서는 적극적으로 SSG를 적용해봐도 좋을 것 같습니다.
기존 어드민의 경우 node서버 덕분에 인증이나 이미지 처리등을 자체적으로 빠르게 해결할 수 있었습니다. 지금도 인증 관련 코드들을 어드민 node에서 admin-api로 옮기고 있는데, 인증 뿐만 아니라 이미지 처리도 어드민 node에서 떼어낸 뒤에는 admin을 SSG로 서빙할 수 있습니다. serverless 어드민이라니, 코드라인이 많이 줄어들 것 같습니다.
곧 작가어드민을 만들어야 할 것 같은 느낌이 드는데? 어드민도 만화경웹처럼 lerna를 이용해서 서브 모듈 구조로 변경한 뒤 작가 어드민을 SSG로 빌드해보려고 합니다. aws code pipeline을 사용해서 자동으로 gitlab fetch, build, s3 upload(=배포)를 할 수 있을 것 같습니다.
웹뷰도 SSR이 필요없으니 SSG로 훨씬 빠르게 서빙할 수 있겠네요. Create React App으로 만들고 별도의 설정을 하지 않는다면 브라우저에서 렌더링할 때까지 흰 화면이 보이겠지만, Nextjs의 SSG로 만든다면 데이터가 없는 레이아웃 뼈대는 미리 렌더링되서 올테니 사용자가 느끼는 체감속도는 훨씬 빨라집니다.
김명재 드림