[Next.js] 기본 동작 과정, CSR, SSR ,SSG 쉽게 알아보기

Next.js란?

Next.js란 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성(SSG), 리액트 기반 웹 애플리케이션 기능(CSR)을 입맛대로 사용할 수 있는 React기반 프레임 워크입니다. 각 페이지 상황에 알맞은 렌더링 방식을 사용하여 최적의 사용자 경험 및 효율을 챙겨갈 수 있습니다.

 

즉 각 렌더링 방식의 좋은 것들만 빼와서 적용시킬 수 있는 것이죠. 

---

CSR(Client-side rendering)

클라이언트 단에서 페이지 렌더링을 처리하는 방식으로 데이터를 제외한 코드들은 JS파일에 한 번에 번들되어서 옵니다.

이로 인해서 초기 진입 속도가 느려(빈 화면을 보여주는 상황) 사용자의 경험이 안 좋을 수 있습니다.

해당 부분은 code spltting을 통해 어느 정도 해결이 가능합니다.

 

HTML데이터가 없다 보니 SEO(검색 엔진 최적화)에 취약합니다. (빈 페이지로 인식)

 

페이지 진입마다 서버 요청을 하는 SSR보다는 서버 부하가 덜 하다는 장점도 있습니다.

 

페이지 진입 이후 필요한 데이터만 갱신하면 되기 때문에 서버에 부하를 줄일 수 있습니다.

 

SSR(Server-side rendering)

요청마다 페이지를 구성하여 클라이언트에게 전달해 줍니다.

이로 인해 빠른 초기 진입 속도와 SEO를 보장해 주죠.

 

허나 이 방식을 페이지 진입 시마다 계속 요청을 합니다. 즉 서버에 불필요한 자원, 트래픽으로 인해 서버에 과부하를 일으킬 수 있습니다.

그래서 항상 최신데이터를 가지거나 동적인 페이지에 적합한 렌더링 방식입니다. (막 쓰면 안 좋다.)

 

SSG(Static-side rendering)

빌드 시점에만 페이지를 구성하여 클라이언트에게 전달해 줍니다.

CDN을 이용하여 사용자 근처에 캐싱하여 큰 효율을 챙길 수 있는 장점이 있습니다.

 

그리고 SSR과 같이 빠른 초기 진입 속도와 SEO를 보장해 주죠.

 

허나 빌드 시점에 한 번 발생되기에 최신데이터를 가지거나 동적인 페이지에는 적합하지 않습니다.

 

---

본격! Next.js의 기본 동작 원리는?!

아래에 기본 동작 원리를 알아보도록 하죠.

 

1. Pre-rendering & Initial-load

사용자가 첫 페이지에 접속했을 때 서버에서 미리 만들어놓은 HTML, CSS를 클라이언트에게 전달해 줍니다

이후 JS를 받아오기 이전 HTML, CSS를 먼저 화면에 보여주게 됩니다.

 

이로 인해서 사용자들은 진입 초기에 빈 페이지를 보지 않아도 됩니다.

 

하지만 지금까진 정적인 뷰 상태일 뿐 JS가 아직 적용되지 않은 상태입니다.

즉 Pre-Rendering 시점에선 사용자 인터랙션은 불가능한 상태죠. 

 

참고로 요청하는 페이지에 선언된 Data-fetching함수에 따라서 두 가지의 Pre-rendering 방식이 있습니다.

 

SSR : 페이지 요청 시마다 HTML을 생성 (getStaticProps)

SSG : 빌드 타임에 HTML을 생성 (getServerSideProps)

 

아무런 Data-fetching 함수도 없다면 기본적으로 SSG 방식으로 동작합니다.

 

2. Hydration

위에 Pre-rendering, Initial-load의 작업 이후 번들링된 JS를 받아와서 기존 HTML에 연결하는 작업입니다.

 

페이지가 완성되었습니다, 이제 사용자 인터랙션이 가능해지는 시점입니다.

 

3. 페이지 이동 및 인터랙션 발생 시

이후 사용자가 페이지 이동 및 인터랙션 발생 시 CSR 방식으로 동작합니다.

 

즉 페이지를 이동할 시 서버를 거치지 않고 페이지를 이동하며 필요한 데이터만 갱신할 수 있습니다.

---

Next.js의 사용이유

기존 React의 장점을 살리고 단점을 보완한 좋은 React 기반 프레임워크라고 생각이 됩니다.

 

초기 렌더링 시 CSR의 단점을 SSR, SSG로 보완하여 초기 진입 속도와 SEO(검색 엔진 최적화)를 챙겨갑니다.

이후 사용자 인터랙션 발생 시점에선 CSR의 장점을 적용하여 페이지를 이동할 시 서버를 거치지 않고 부드럽게 이동하며 필요한 데이터만 갱신을 할 수 있게 됩니다.

 

이렇게 SSR, SSG, CSR를 섞어가며 각 페이지마다 맞는 렌더링 방법(SSR, SSG)과 인터랙션 시 효율적인 리액트 기반 웹 애플리케이션 기능(CSR)을 적용하며 좋은 완성물을 만들어 낼 수 있습니다.

 

그래도 프로젝트 규모에 따라 어떤 것을 사용하여 프로젝트를 완성시키는 게 효율적인지는 고민해봐야 합니다.

---

References

 

https://velog.io/@hyeewooon/nextjs

Next.js 동작 원리

https://adjh54.tistory.com/m/52

[JS] Next.js 이해하기(정의, 사용목적)

https://cheolsker.tistory.com/45

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

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

CSR vs SSR vs SSG - 콥 노트