[Next.js] 헷갈렸던 Next.js 동작 원리

Next.js 애플리케이션은 Node.js 기반의 서버에서 동작하며, SSR을 제공해주는 SPA이기도 합니다.

Next.js 서버는 프론트엔드 환경을 제공해주는 서버입니다. 

 

 

 

기본적인 시나리오는 다음과 같습니다.

---

Next.js 서버 >

서버가 실행중이고 대기중인 상태이다.

 

클라이언트 >

서버에 페이지를 요청한다.

 

Next.js 서버 >

첫 페이지 요청 시, pre-rendering된 HTML을 전달한다.

HTML과 더불어 자바스크립트 번들 파일을 전달한다.

 

클라이언트 >

브라우저에서 HTML을 해석해서 페이지를 렌더링한다.

자바스크립트 파일이 로드되기 전까지는 페이지만 보여지고, 사용자는 인터렉션할 수 없다.

 

클라이언트 >

첫 페이지를 렌더링한 상태에서,

사용자가 두 번째 페이지로 이동한다.

 

클라이언트 >

CSR 방식으로 두 번째 페이지로 이동한다.

 

 

 

pre-rendering은 무엇이고 Next.js에서 어떻게 처리하는 것일까?

---

첫번째로 요청하는 페이지에서 선언한 Data-fetching 함수의 종류에 따라 동작이 달라진다.

 

 

1. SSG (Static-side generation)

빌드 타임에 HTML 파일을 생성합니다.

getStaticProps 함수가 있으면 빌드 타임에 함수를 실행합니다.

 

이 함수를 통해서 서버와 통신하거나 임의의 데이터를 페이지에 Props 형태로 넘길 수 있습니다.

getStaticProps 함수가 없어도 SSG 방식입니다.

 

 

2. SSR (Server-side rendering)

페이지 요청 시마다 HTML 파일을 생성합니다.

getServerSideProps 함수가 있으면 SSR 방식으로 동작하며, 페이지 요청 시에 함수를 실행합니다.

 

getStaticProps와 비슷하게 getServerSideProps를 통해 서버와 통신하거나 임의의 데이터를 페이지에 Props 형태로 넘길 수 있습니다.

 

 

Q. 첫 페이지 요청 시, CSR은 일어나지 않는 것일까?

첫 페이지 요청 시에는 SSG 또는 SSR 방식으로 생성된 HTML이 브라우저에 렌더링됩니다.

HTML 파일과 더불어 페이지에 필요한 JS 파일도 같이 전달받는데요.

hydration이 이뤄지고 난 후, CSR을 일으키는 코드가 있으면 CSR이 일어납니다.

 

예를 들어, SSR이 이뤄지고 난 후 useEffect 같은 코드에 data-fetching 함수가 실행되어 상태값이 업데이트 되면 화면이 리렌더링 (CSR) 되는 경우가 있습니다.

즉, SSG + CSR 또는 SSR + CSR 도 가능한 것입니다.

 

 

 

SSG, SSR, CSR 비교

 

 

 

두 번째 페이지 렌더링 방식은 어떻게 동작할까 ?

---

첫 번째 페이지 렌더링은 pre-rendering 방식으로 동작한다고 위에서 설명했습니다.

Next.js는 두 번째 페이지 요청부터는 CSR 방식으로 동작합니다.

 

최초 DOM 생성 이후, 페이지를 이동할 때마다 페이지 일부를 바꾸는 형태가 되는 것입니다.

페이지를 이동할 때마다 필요한 JS, JSON 파일을 받아오는 데요.

 

요청 페이지에 getServerSideProps 함수가 있는 경우, 요청할 때마다 이 함수를 실행해줍니다.

요청 페이지에 getStaticProps 함수가 있어도 이 함수는 빌드 때만 실행되기 때문에 이미 계산된 데이터만 내려줍니다.

 

 

 

 

샘플 코드

---

위에서 테스트할 때 작성한 코드는 아래 Git 저장소에서 확인하실 수 있습니다.

https://github.com/CheolWoongChoi/Next_SSG_SSR_Sample