[Next.js] 렌더링 기법 (CSR, SSR, SSG, ISR)

🗂️ 용어 정리

❓렌더링이란?

렌더링이란 렌더링 엔진에 의해 HTML 문서 요소를 실제 화면에 그리는 작업을 의미하기도 한다. 하지만, 해당 글에서의 렌더링은 화면에 보일 HTML 문서를 완성하는 작업을 의미한다.

 

 

❓TTV & TTI

• TTV : Time To View ➡️ 유저가 사이트를 볼 수 있는 시간
• TTI : Time To Interact ➡️ 유저가 인터랙션을 할 수 있는 시간

화면이 그려지고 유저가 확인할 수 있는 상태가 되는 시간을 TTV라고 하며, 클릭을 비롯한 브라우저에서의 상호작용이 가능해지는 시간을 TTI라고 한다.

 

웹 개발시 중요한 포인트 중 하나가 바로 TTV와 TTI를 줄이는 것이다.

 

 

❓SEO

• Search Engine Oprimization: 검색 엔진 최적화

 

웹 사이트 제작 시 검색 엔진에 잘 노출되어 더 많은 사용자가 접속할 수 있도록 하는 것은 서비스 성장 면에서 중요하다.

웹 크롤러는 웹을 돌아다니면서 HTML 문서들에 담긴 정보를 수집하여 어떤 내용이 담겨있고, 어떤 것이 더 노출되면 좋을 지에 대해 검사한다.

 

 

💁🏻 렌더링 기법의 종류

⚙️ CSR (Client Side Rendering)

출처 : Medium

CSR은 화면에 그려질 HTML 문서를 Javascript를 이용해서 클라이언트 사이드에서 완성하는 방식이다. 클라이언트에서 서버로 처음 요청할 때 HTML 문서를 응답으로 받고 렌더링에 필요한 Javascript 코드를 요청한다. 상태 값이 변해도 HTML 문서 전부를 새로 그리는 것이 아니기 때문에 사용자 경험이 좋아 SPA가 주목받는 계기가 되었다.

👍 장점

• 한번 로딩 되면, 빠른 UX 제공
• 데이터를 부분적으로 가져오기 때문에 서버의 부하가 적음

👎 단점

• 페이지 로딩 시간 (Time to view)이 길다. (First Contentful Paint ⬆️)
• 자바스크립트 활성화 필수
• SEO 최적화가 힘들다. (페이지 로딩 단계에서 크롤러는 빈 HTML 파일을 읽기 때문)
• 보안에 취약하다. (서버로부터 받아야 할 데이터 목록, 데이터를 받기 위해 필요한 키 등을 클라이언트가 갖고 있어서 서버 요청 중 중간에 탈취 당할 위험이 있다.)
• CDN(Content Delivery Network)에 캐시가 안됨

➡️ 이런 문제점을 해결하기 위해 나온게 SSG, SSR

 

✅ CSR 체크 리스트
- 검색엔진에 노출되지 않아도되는(않아야하는) 페이지인가?
- 유저와의 인터렉션이 잦은가?
- 화면 업데이트/렌더링이 잦은가?
- 초기 로딩이 조금 느리더라도 부드러운 사용자 경험이 중요한가?

 

 

⚙️ SSR(Server Side Rendering)

출처 : Medium

SSR은 클라이언트가 특정 페이지 요청을 보낼 때 마다 서버에서 홈페이지에 필요한 코드를 실행하고, DB 및 클라우드에서 페이지에 필요한 데이터를 받아온 뒤 HTML 파일을 만들어서 클라이언트에 전달하는 기법이다.

 

👍 장점

• 페이지 로딩 시간이 빠르다.
• 자바스크립트가 필요하지 않다.
• SEO 최적화가 좋다.
• 보안이 뛰어나다.
• 실시간 데이터를 사용할 수 있다.

 

👎 단점

• 다른 기법에 비해 비교적 느릴 수 있다.
• 매 요청마다 페이지를 만들어야 하므로 서버에 과부하(overhead)가 걸릴 수 있다.
• 사용자가 많아질 수록 과부하가 일어나 사용자의 사이트 접속 시간이 오래 걸린다.
• CDN에 캐시가 되지 않는다.

✅ SSR 체크 리스트
- 검색엔진 노출이 필요한 페이지인가?
- 사용자의 요청에 따라 고정되지 않은 데이터를 불러와야하는가? (화면 구성에 유저마다 다른 데이터 패치가 필요한가)
- 렌더링 후 사용자와의 즉각 인터렉션보다 화면 구성을 보여주는 것이 우선되는가?
- 너무 잦은 인터렉션은 없는가?

 

 

⚙️ SSG(Static Site Generation)

출처 : Medium

SSG 방식은 빌드 시 페이지를 렌더링하는 방식이다. 렌더링의 주체는 서버이며, 빌드 타임에 렌더링된다.

서버에서 빌드할 때 HTML 파일을 미리 만들어놓고, 클라이언트는 CDN에 캐쉬된 페이지를 사용하게 된다. 모든 사용자가 동일한 컨텐츠(정적 컨텐츠)를 제공 받을 때 유용하다.

 

Next.js에서 권장하는 렌더링 방식이기도 하다.

 

👍 장점

• 페이지 로딩 시간(TTV)이 빠르다.
• 렌더링 시에 자바스크립트가 필요하지 않다.
• SEO 최적화가 좋다.
• 불필요하게 코드들을 클라이언트 측으로 보내지 않아도 되므로 보안이 뛰어나다.
• CDN에 캐시가 된다.

 

👎 단점

• 데이터가 정적이기 때문에 사용자별 정보 제공에 어려움이 있다.
• HTML 문서에 변경 사항이 있다면 프로젝트를 다시 빌드해야 한다.

➡️ 이런 문제점을 해결하기 위해 나온게 ISR, SSR

✅ SSG 체크 리스트
- 업데이트가 없거나 현저히 적은가?
- 생성되는 정적파일의 개수가 너무 많지는 않은가?

 

 

⚙️ ISR(Incremental Static Regeneration)

출처 : Smashing Magazine

ISR은 렌더링하는 주체가 서버이고, 주기적으로 렌더링을 하는 기법이다. (revalidate)

빌드할 때 서버에서 렌더링을 진행하고, 정해진 주기에 따라 페이지를 다시 생성한다.

 

👍 장점

• 페이지 로딩 시간이 빠르다.
• 자바스크립트가 필요하지 않다.
• SEO 최적화가 좋다.
• 보안이 뛰어나다.
• CDN에 캐쉬가 된다.
• 데이터가 주기적으로 업데이트 된다.

 

👎 단점

• 실시간 데이터가 아니다. (정해진 주기에 따라서만 변경된 데이터 확인 가능)
• 사용자별 정보 제공이 어렵다.

➡️ 이런 문제점을 해결하기 위해 나온게 SSR

✅ ISR 체크 리스트
- 페이지의 방문자의 수요에 맞추어 업데이트가 필요한가?
- revalidate에서 업데이트 되는 데이터의 양이 너무 많지는 않은가?

 

 

 

✏️ 정리

• CSR -  useEffect를 이용해 데이터를 가져오는 평범한 방법이며, 각 페이지 요청마다 클라이언트 측에서 데이터를 가져온다. (페이지가 렌더링 된 후 데이터를 가져오는 함수가 실행된다.)
• SSR - 각 페이지 요청마다 서버 측에서 데이터를 가져오는 함수를 실행한다. (페이지가 로드되기 전에 특별한 함수가 먼저 실행되고 잠깐의 딜레이 후에 페이지가 렌더링된다.)
• SSG - 어플리케이션이 빌드될 때 한 번 데이터를 가져오기 위해 함수를 실행한다.
• ISR – 새로운 렌더링 방식으로 기본적으로 SSG이지만 특정 시간과 특정 조건에 따라 해당 페이지만 다시 빌드하고 데이터를 가져오는 함수를 실행한다.

 

Next.js가 흔히 서버 사이드 렌더링 프레임워크라고 알려져 있지만, 렌더링 기법이 4가지나 존재한다.

더군다나 Next.js 13버전부터는 페이지 단위로 렌더링 기법을 정하는데 그치지 않고, 컴포넌트 별로 렌더링 기법을 다르게 설정할 수 있게 되었다. (한 페이지에 여러 렌더링 기법 혼합 가능)

 

해당 렌더링 기법들을 잘 이해하며, 어떤 컴포넌트에서는 어떻게 구현해야 더 나은 사용자 경험을 제공할 수 있을지를 고민하며 개발하는 개발자가 되길 소망한다.

 

---

💖 참고

• https://www.philly.im/blog/grokking-data-fetching-in-nextjs
• https://velog.io/@soryeongk/pre-rendering-check-list