Next.js - 프리렌더링 (SSG, SSR)

브라우저 접속했을때 렌더링 시점 (CSR 기준)

1. html 빈 태그 전달
2. 자바스크립트 코드 로딩, 리액트 실행
3. 화면 렌더링

pre-rendering : 1번 단계 이전에 렌더링 하는것

즉 빈 html 파일을 전달하는 것이 아니라 데이터가 렌더링된 페이지를 전달한다.

---

프리렌더링의 방식 두 가지

 

1. 정적 생성 (Static Site Generation)

빌드 시점에 렌더링(HTML을 만들고) 접속 시점에 보내준다.

그 상태에서 자바스크립트 로딩, 리액트 실행-> 클라이언트 사이드에서 리액트가 작동 (hydration)

useEffect에서 요청하는 데이터는 로딩 전임

 

export function getStaticProps(context) 함수를 사용하면 빌드 시점에 데이터 가져올수있음

return 

props : { }

 

 

export function getStaticPaths(context)

return

path : {param}

fallback: true 라고하면 생성되지 않은 페이지로 접속했을 때 `getStaticProps()` 함수를 실행해 페이지를 만들어서 보여준다.

 

정적 생성은 아래 경우에는 적절하지않음

- 항상 최신 데이터를 보여 줘야 하는 경우
- 데이터가 자주 바뀌는 경우
- 리퀘스트의 데이터를 사용해야 하는 경우 (예: 헤더, 쿼리스트링, 쿠키 등)

이런 경우에는 SSR을 하는 것이 적합하다.

2. 서버사이드 렌더링

웹브라우저가 GET 리퀘스트를 보낼때 서버가 매번 렌더링된 html을 보내준다.

자바스크립트 로딩, 렌더링된 화면에 리액트 연결(hydration)

export getServerSideProps(context){
const q = context.query['q']
...

 

장점

1. 초기 로딩이 빠르다
2. 검색엔진 최적화 (빈 html가 아닌 데이터가 들어있는 html을 전달하므로)