NextJS 13버전 이전 page router를 사용하는 방법에서의 렌더링 방식이다.
rendering 방식
1. 서버
SSR(server side rendering) : 서버단위에서 미리 코드를 실행시키고 사용자에게 보여줌.
실행 : 페이지 방문마다
장점 : 미리 코드를 서버에서 실행시킨뒤 렌더링하기 때문에 사용자가 로딩상태의 요소들을 보지 않아도 됨.
단점 : 미리 코드를 서버에서 실행시킨뒤 렌더링하기 때문에 사용자가 이 페이지를 보는데 시간이 소요될 수 있음.
2. 사용자
CSR(client side rendering) : 먼저 요소들을 뿌려주고 브라우저 상에서 코드를 실행시킴.
실행 : 페이지 방문마다
장점 : 정적인 요소들은 뿌려주고, 동적인 요소들은 나중에 뿌려주기 때문에 사용자가 우선 뭐라도 볼 수 있다.
단점 : 정적인 요소들은 뿌려주고, 동적인 요소들은 나중에 뿌려주기 때문에 로딩상태가 존재할 수 있다.
3. static
Static : 블로그 파일, 프로필과 같은 바뀌지 않는 파일들을 프로그램 build시에 처음 한번만 실행시킴.
실행 : build시 한번만!!!
장점 : 한번만 실행되고 다음번에 같은 페이지로 들어와도 getStaticProps함수를 실행시키지 않음. 또한 미리 html로 생성이 끝나서 사용자가 페이지로 들어올 때 기다릴 필요가 없다.
단점 : build시 한번만 실행되기 때문에 업데이트를 하고 싶으면 다시 프로그램 전체를 build해야함.
4. ISR
ISR : SSR, CSR 두 방식의 장점만 모아 놓은 방법
- getStaticProps로 정보들 가져옴.
- build시 컴포넌트에 먼저 가져온 정보들 뿌려줌
- 사용자가 페이지 로딩, 요소 로딩상태에 있지 않아도 됨.
- 만약 누군가 글을 새로 올리면 다시 getStaticProps를 실행해주어야 함.(안 그러면 업데이트 안됨!!!)
- 이 때 필요한 것이 revalidation. revalidation을 통해 서버상에서 몰래 getStaticProps를 실행함. => 업데이트 가능(원하는 주기, 때에)!