[CSR/SSR/SSG/ISR]

 

1. CSR

- 클라이언트 측에서 Javascript 를 사용해 동적으로 웹 페이지를 렌더링하는 방식
- 페이지에 요청이 들어오면 필요한 Javascript 파일을 다운로드하고 실행하여 렌더링하기 때문에, 초기 로딩 속도는 SSR 보다는 느리지만, 페이지를 로딩한 후에는 빠른 페이지 전환이 가능하다.

 

2. SSR

- 서버에서 HTML/CSS/Javascript 를 만들어 클라이언트 측에 전송하는 방식
- HTML 에 초기 상태, 동적으로 생성되는 데이터가 모두 포함되며, 초기 로딩 속도가 빠르지만, 서버에서 처리하므로, 서버 자원이 사용되어, 대규모 트래픽에 서버 과부하 우려가 있으며, 페이지 전환 시에는 CSR 보다는 느린 로딩 속도를 가진다.
- 서버 요청 시간이 길어지면 사용자가 흰 화면을 오래보게 된다.

 

3. SSG

- 서버에서 HTML 정적 파일을 만들어서 빌드 시에 사전에 렌더링 하는 방식
- SSR 와 차이는 Javascript 를 취급하지 않는다.
- 빌드 시점에 모든 페이지를 사전에 렌더링하기 때문에, 초기 로딩 속도가 매우 빠르며, HTML 파일은 CDN에 캐시되기 때문에 검색 엔진 최적화(SEO) 에도 유리하다.
- 다시 빌드 할 떄 까지 변경이 불가능하다. (fetch 데이터가 변경되면 다시 빌드)

type Test = {
  name: string
}

export const getStaticProps: GetStaticProps<{test: Test}> = async () => {
  	const res = await fetch('api')
  return { props: { test } }
}

 

4. ISR

- 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간 마다 페이지를 새로 렌더링한다.
- revalidate (초) 마다 페이지가 새로 렌더링 된다.

type Test = {
  name: string
}

export const getStaticProps: GetStaticProps<{test: Test}> = async () => {
  	const res = await fetch('api')
  return { 
        props: { test },
        revalidate: 30,  
  }
}