렌더링 방식이 이렇게 다양한지 처음 알았다
React 처음 공부할 때는 '아 클라이언트사이드렌더링(CSR)라고 불리는구나' Next 배울 때는 '아 이건 서버사이드렌더링(SSR)이구나'
개념이 뭔지도 모르고 외우려고 했다.
내 인생에서 제일 열심히 공부하고 있다. 개발 잘하는 사람이 될것이다.
아자아자 화이팅
화면 렌더링 시
TTV(Time To View) = 화면 보여질때까지 시간 TTI(Time To interact) = 화면이 동작할 수 있을때까지 걸리는 시간
렌더링 종류
ISR = Increamental Static Refeneration SSG = 서버에 빌드 될 때 미리 페이지를 만들어 냄(정적) 블로그 같은데 많이 쓰일 듯 지금 블로그도 SSG로 만드는 중 SSR = 서버에서 렌더링 CSR = client에서 렌더링
SSG
Generating Static Params: https://beta.nextjs.org/docs/data-fetching/generating-static-params
로 서버에 빌드 시 페이지 생성
next12 vs next13 v12 = 페이지 단위로 렌더링 방식을 규정
export function getStaticProps() {} //← SSG, export function getServerSideProps() {} //← SSR
v13 = 컴포넌트 단위로 렌더링 방식을 규정 server component
server component는 client component 에서 사용하는 브라우저 API를 사용할 수 없다. react hook 등 CSR에서 제공하는 기능들고 사용할 수 없다. node server API는 사용 가능
client component는 파일 최상단에 ‘use client’ 선언 필요(NEXT@13 기준)
fetch 옵션 {next: {revalidate: {SEC}}} ← ISR,
next: {revalidate: 0} cache: ‘force-cache’ , cache: ‘force-cache’ ← SSR
CSR← 동적이고 서버에 부담이 가지 않게 할(중요하지 않은 경우)
v12에서 페이지들은 client에서 렌더링된다 getStaticProps()에서 서버에 요청하고 정적요소를 가져온다
v12에서 ISR 사용법은 getStaticProps에서 return 값에 revalidate를 설정해준다.
loading.js ← react boundary를 사용해서 노출됨 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
병렬적 구현은 두개 이상의 Promise 자체를 변수로 할당하고
await Promise.all([{}, {}]);
로 비동기 처리한다.
redirect → a를 b로 이동시켜줌
rewrite → 기존에 있던 a를 b로 덮어씌어줌