서론
Next.js 에는 크게 아래와 같은 두 가지의 렌더링 방식이 존재합니다.
- SSR
- CSR
하지만 두 렌더링 의 특징과 장단점을 알고 있더라도 실제 코드에서는 이를 구분하기위해 어떻게 작성하며,
내가 작성한 코드가 어떤 방식으로 해당 렌더링을 구현 해 주는지 잘 모릅니다.
이 글은 렌더링에 관한 글 이지만 주 관전 자체는 Next.js 의 동작 방식에 두고 있으며 과정에 대한
분석을 위한 글 입니다.
또한 해당글에서는 SSR/CSR의 개념에 대해서는 추가설명 하지않겠습니다.
1. 서버 / 클라이언트 컴포넌트 의 구분
서버 / 클라이언트 컴포넌트 특징 관련 글
코드를 작성하면서 보는 두 컴포넌트 단위의 가장 큰 특징은 ‘use client’를 최상단에 선언하냐 안하냐 입니다.
선언하면 해당 파일은 hooks를 사용할 수 있고 대부분 파일에서
app router기반이라면 ‘use client’를 사용할 것입니다.
하지만 정작 이것을 왜 나눴는지, 왜 사용해야만 hooks를 쓰게 해주는지 단계의 고민을 해보겠습니다.
- 나눈 이유
왜 컴포넌트를 서버/클라이언트로 나눴는지에 대한 해답은 “렌더링 구조의 변경” 입니다.
app router를 사용하는 가장 큰 목적은 “페이지 성능 개선”입니다.
“페이지 성능 개선” 이라는 목적을 이루기 위해 app router는 렌더링의 단위를
페이지 단위 ⇒ 컴포넌트 단위 로 바꿨습니다.
렌더링 의 단위를 바꿈으로써 Next.js는 다음과 같은 이점을 얻습니다.
- 서버 리소스 최적화
- 전체가 아닌 필요한 부분만을 서버가 읽게 하여 서버의 리소스를 최적화 시켰습니다.
- 기존 SSR의 단점인 “서버 부하”문제에 대한 어느정도의 개선
- 사용자 접근성 최적화
- 사용자가 인터페이스에 접근 할 때 컴포넌트별로 적합한 렌더링 방식을 채용하여 로딩속도 개선
그 외에도 좀 더 많은 장점이 있지만 가장큰 두가지의 장점을 소개했습니다.
따라서 우리는 app router의 목적에 맞게 서버 / 클라이언트 컴포넌트를 적재적소에 사용 할 줄 알아야합니다.
2. SSG(Static Site Generation) 와 SSR/CSR의 개념
SSG 관련 글
SSG는 설명에 나와있던 대로 Next.js의 기본적인 랜더링 방식이며
“Next.js가 빌드를 하는 시점”에 서버에서 생성한 “정적인 HTML”입니다.
SSG가 Next.js의 기본 랜더링 방식인 이유는 SSR/CSR 보다 한 단계 앞선 build 시점에 만들어진 파일이기 때문입니다.
SSR/CSR 같은경우에는 페이지가 요청이 되고나서 인 runtime 시점에
각 렌더링방식의 특징에 맞춰 렌더링이 진행되지만.
SSG의 경우에는 미리 만들어서 캐싱해둔 HTML파일을 보여줍니다.
이제 여기에 SSG의 정적파일 이후에 “클라이언트 컴포넌트”의 스크립트가 실행되는 방식을 CSR 이라하며,
SSG 정적파일에 서버 컴포넌트의 동작이 있다면 SSR인 셈입니다.
보통 SSR/CSR/SSG를 묶어서 설명하지만 엄연히 다른시점에서 생성이 되며, 그렇기에
SSR/CSR 그리고 SSG로 나뉘는게 맞습니다.
3. App router에서의 렌더링 - 결론
Next.js는 “page router” 방식에서 “app router” 방식으로 대대적인 변경을 시행 했습니다.
이 변경으로 인해 기존에 SSR을 위하여 사용하던 “getServerSideProps”나 “initialProps”등 함수 혹은
ISR방식의 렌더링 기법 이 외에도 유용 했던 다양한 기능들이 제거 되었습니다.
- 단위변경
이 영향은 렌더링또한 많은 영향을 끼쳤는데 가장 큰 변경점은 컴포넌트 단위의 랜더링 구현입니다.
“page router” 방식을 채택할 경우 우리는 하나의 페이지를 SSR로 처리할지 CSR로 처리할지를 고민 하였지만
“app router” 에서는 페이지 단위가 아닌 페이지 내부의 컴포넌트 단위로 렌더링 방식을 나누어 처리해
보다 효율적인 리소스 사용과 사용자 접근성을 추구합니다.
앞서 말한 “getServerSideProps”나 “initialProps”등 함수 혹은 ISR방식의 렌더링 기법 또한 페이지에 대한
SSR처리가 아닌 컴포넌트의 처리로 가장 큰 개념이 변경되며 삭제된 케이스에 속합니다.
