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 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로 만든다면 데이터가 없는 레이아웃 뼈대는 미리 렌더링되서 올테니 사용자가 느끼는 체감속도는 훨씬 빨라집니다.

김명재 드림

99.
[2021.04.21]
결혼하면 매주 읽어야 할 글
98.
[2021.04.17]
이제부터 채식뿐이야
97.
[2021.04.15]
쭉정이 이론
96.
[2021.04.11]
실패에 우아할 것
95.
[2021.04.10]
이 땅에 임하실 하나님 나라
94.
[2021.04.05]
정경의 권위는 로마 황제로부터
93.
[2021.03.28]
개신교 극우주의와 차별금지법 - 김희현 목사
92.
[2021.01.24]
성녀 막달라 마리아
91.
[2020.10.30]
TDD는 끝없는 자기부정이다
90.
[2020.10.29]
The Twelve-Factor App
89.
[2020.10.26]
육하원칙이 아니라 5원칙이 필요하다
88.
[2020.10.15]
Interview-driven study
87.
[2020.09.20]
불신자가 읽는 성경
86.
[2020.09.01]
기독교 복음주의, 반동적인 초국가기구
85.
[2020.08.29]
종교가 돈이 되고 권력이 될 때, 신앙이란 이름으로 이성적 사고가 마비될 때
84.
[2020.08.28]
쿠팡 추천시스템 변천사
83.
[2020.08.25]
IntelliJ 2020과 QueryDSL 플러그인 문제
82.
[2020.08.09]
cherry-pick대신 rebase --onto
81.
[2020.08.07]
Java Reactive Stream 명세
80.
[2020.08.02]
Amazon Linux 2, Nginx, Let's Encrypt
79.
[2020.08.02]
웹 디자인 레퍼런스 모음
78.
[2020.07.28]
동시성 프로그래밍 게임
77.
[2020.07.27]
적정 수면시간은 더 잘 수 없을 때까지 자는 것이다
76.
[2020.07.22]
Kibun
75.
[2020.07.22]
파워포인트 대신 글쓰기로
74.
[2020.07.17]
컨볼루션
73.
[2020.07.14]
사용성
72.
[2020.07.13]
AWS Well Architectured Framework
71.
[2020.07.13]
안경 Plainbrand
70.
[2020.06.27]
국가기관의 성별선택란
69.
[2020.06.15]
이놈들아 미꾸라지 다 죽것다
68.
[2020.06.14]
css 기본 폰트 설정
67.
[2020.06.14]
메타 태그 정리
66.
[2020.06.13]
다크 모드 지원
65.
[2020.06.13]
Effective Java 원서로 다 읽었다
64.
[2020.06.08]
MBTI 전문가 발언
63.
[2020.05.16]
Java의 Cloneable 인터페이스
62.
[2020.04.28]
마틴 파울러의 Self Testing Code
61.
[2020.04.21]
추천 알고리즘과 텐서플로우
60.
[2020.04.19]
함수형 프로그래밍 레퍼런스
59.
[2020.04.19]
리눅스 예쁜 명령어
58.
[2020.04.15]
Spring 웹 컨트롤러 프록시
57.
[2020.04.13]
redux-toolkit과 typesafe-actions
56.
[2020.04.12]
VPC 이해하기
55.
[2020.04.12]
NIO가 성능이 좋은 이유
54.
[2020.04.11]
풀 스택과 NIO
53.
[2020.04.08]
Next.js v9.3 인증과 SSG
52.
[2020.04.04]
redux-observable
51.
[2020.04.04]
블로그 1.0 완성
50.
[2019.09.14]
49.
[2019.09.13]
혐오정치와 개신교
48.
[2019.09.12]
보이는 것은 실재가 아니다
47.
[2019.09.08]
인연 - 피천득
46.
[2019.06.09]
이건 하면서 저건 왜 안해요?
45.
[2019.05.13]
존재에 대하여 [有物]
44.
[2019.05.06]
죽편(竹篇) 1 - 여행
43.
[2019.05.05]
당신 인생의 이야기
42.
[2019.05.04]
41.
[2019.04.29]
有朋自遠方來 不亦樂乎
40.
[2019.04.27]
에고센트릭 시스템
39.
[2019.04.15]
서구가 만든 중동
38.
[2019.04.14]
나는 간호사, 사람입니다.
37.
[2019.04.12]
Our Planet
36.
[2019.04.11]
"불교에서는 생명 아닌게 없어"
35.
[2019.04.10]
볼링 100점
34.
[2019.04.09]
르몽드 디플로마티크 2월
33.
[2019.03.23]
32.
[2019.03.20]
부두
31.
[2019.03.15]
30.
[2019.03.11]
지옥
29.
[2019.03.06]
28.
[2019.03.05]
기본소득 → 무상 서비스
27.
[2019.03.04]
기술 도서
26.
[2019.03.03]
25.
[2019.03.02]
손 씻기
24.
[2019.03.01]
퍼블리2
23.
[2019.02.28]
책 읽기
22.
[2019.02.27]
퍼블리
21.
[2019.02.26]
위빠사나
20.
[2019.02.25]
다육이2
19.
[2019.02.24]
18.
[2019.02.23]
비극
17.
[2019.02.22]
간담회 후
16.
[2019.02.21]
누구인가?
15.
[2019.02.20]
팀원을 평가하는 세 가지 기준
14.
[2019.02.18]
감사의 글
13.
[2019.02.16]
파워풀
12.
[2019.02.15]
11.
[2019.02.14]
단조증가
10.
[2019.02.13]
퍼스날 데이타베이스
9.
[2019.02.11]
성찰하는 남자들
8.
[2019.02.10]
삶의 의미
7.
[2019.02.08]
6.
[2019.02.07]
버림받는다는 것
5.
[2019.02.06]
전문성
4.
[2019.02.05]
다육이
3.
[2019.02.04]
React
2.
[2019.02.03]
1.
[2019.02.02]
첫 번째 일기