첫 블로그 포스팅

렌더링 방식이 이렇게 다양한지 처음 알았다

react 처음 배울 때는 아 클라이언트사이드렌더링(CSR)라고 불리는구나

next 배울 때는 아 이건 서버사이드렌더링(SSR)이구나

뭔지도 모르고 외우려고 했다.

내 인생에서 제일 열심히 공부하고 있다. 개발 잘하는 사람이 될것이다. 아자아자 화이팅

화면 렌더링 시

• TTV(Time To View) = 화면 보여질때까지 시간
• TTI(Time To interact) = 화면이 동작할 수 있을때까지 걸리는 시간

렌더링 종류

1. ISR = Increamental Static Refeneration
2. SSG = 서버에 빌드 될 때 미리 페이지를 만들어 냄(정적) 블로그 같은데 많이 쓰일 듯 지금 블로그도 SSG로 만드는 중
3. SSR = 서버에서 렌더링
4. CSR = client에서 렌더링

SSG

Generating Static Params: https://beta.nextjs.org/docs/data-fetching/generating-static-params

로 서버에 빌드 시 페이지 생성

next12 vs next13

• v12 = 페이지 단위로 렌더링 방식을 규정 getStaticProps()← SSG, getServerSideProps()← SSR
• v13 = 컴포넌트 단위로 렌더링 방식을 규정 server component

server component는 client component 에서 사용하는 브라우저 API를 사용할 수 없다. 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를 사용해서 노출됨 (더 알아보기)

병렬적 구현은 두개 이상의 Promise 자체를 변수로 할당하고 await Promise.all([{},{}])로 비동기 처리한다.

refirect →a 를 b로 이동시켜줌

rewrite → 기존에 있던 a를 b로 덮어씌어줌