24.07.02

[Next.js 렌더링 방식]

1. SSG(Static Site Generation)
: 한 번 fetch한 데이터가 영원 불변. 컴포넌트 갱신 불필요,
빌드 타임 때만 컴포넌트를 생성한 후 static컴포넌트 제공.
Next.js는 아무것도 하지 않으면 기본이 SSG로 동작.
e.g)about 페이지

2. ISR(Incrementail Site Regeneration)
: fetch한 데이터가 가끔 변화. 일정 주기로 컴포넌트 갱신.

3. SSR(Server Side Rendering)
: fetch한 데이터가 실시간 변화. 컴포넌트 요청 시마다(사용자가 클릭할 때마다) 데이터를 갱신해 user에게 최신 데이터만 제공.

4. CSR(Client Side Rendering)
: fetch한 데이터가 실시간 변화. 컴포넌트 요청 시마다 데이터 갱신, 최신 데이터만 제공. 빌드 타임에 컴포넌트를 초기 생성하지 않고 JS로 이루어진 리액트 파일을 다운 받은 후에야 화면이 그려짐.

dev모드는 SSG도 SSR처럼 보여주기 때문에
테스트 할 때 dev모드 안 됨!

---

[Next.js 렌더링 방식 테스트]

• SSG(1)
  : 따로 추가할 게 없다!

• SSG(2)
  : cache: "force-cache" 추가

  const response = await fetch(`https://randomuser.me/api`, {
    cache: "force-cache",
  });

• ISR(1)
  : next: {revalidate: 숫자,} 추가
  

• ISR(2)
  : export const revalidate = 숫자 추가
  다만 이 방식은 page 레벨에서만 사용할 수 있어서
  해당 페이지의 내용에만 적용된다. (components 레벨 적용 불가)
  나는 (1)보다 (2)가 더 끌린다. 뭐든 줄줄 엮여 있으면 눈 아프죠?

• SSR
  : cache: "no-cache" 추가, 저장된 게 없고 요청 때마다 새로운 거 달라!
  hydration 완료 전까지의 시간 즉, TTI가 관건.
  
  
  

• CSR
  

---

[useEffect 실행 시점]

https://choyeon-dev.tistory.com/10

---

JJQ : (폰 보는 중)
튜터님 : 제가 아이패드로 그려봤는데...
JJQ : (기대감) 오???

JJQ : 귀여워...

---

느낌표 너무 제 눈 앞에 있는 거 아니에요?