UI 그리기 참 쉽죠? : Next.js의 렌더링👨‍🎨

1. 렌더링 방법의 변화: MPA와 SPA📜

01. MPA: Multi-Page Application

MPA(Multi-Page Application)는 전통적인 웹 애플리케이션 방식으로, 사용자가 새로운 페이지로 이동할 때마다 서버에서 HTML 파일을 받아오는 방식이다.

• MPA의 특징
  • 각 요청마다 새로운 HTML을 서버에서 렌더링하여 클라이언트에 전달한다.
  • SEO에 유리하며, 초기 로딩 속도가 빠르다.
  • 페이지 간 전환 시 전체 페이지를 다시 불러와야 하므로 UX가 SPA에 비해 저하될 수 있다.
  • 서버 부하가 크고, 페이지가 많아질수록 유지보수가 어렵다.
• MPA의 장단점

장점	단점
SEO 친화적	페이지 이동 시 느린 속도
높은 확장성	복잡한 개발
	보안 및 유지보수에서 불리함

02. SPA: Single-Page Application

SPA는 단일 HTML 페이지에서 콘텐츠를 동적으로 변경하는 방식으로, 모던 웹의 새로운 패러다임을 제시했다. React와 Angular, Vue.js 등에서 사용한다.

• SPA의 특징

  • 최초 로드 시 필요한 JS 파일을 모두 다운로드하여 이후 페이지 이동 시 클라이언트에서 처리한다.
  • CSR(Client-Side Rendering) 방식을 주로 사용하며, UX 측면에서 좋다.
  • SEO에서 불리하며, 초기 로딩 속도가 상대적으로 느린 것이 단점이다.
  • API를 활용한 비동기 데이터 로딩이 가능하여 복잡한 UI 개발이 용이하다.

• SPA의 장단점

장점	단점
빠른 속도와 짧은 응답시간	느린 초기 구동 속도(TTV)
모바일 친화적	SEO에 불리함
개발 간소화	보안 문제
로컬 스토리지 캐시

2. Next.js의 렌더링 기법🎨

00. Next.js의 렌더링 기법 등장배경

Next.js는 React 기반의 프레임워크로, React SPA의 장점은 유지하면서 SEO와 성능 최적화를 위해 다양한 렌더링 방식을 제공한다.

01. CSR: Client Side Rendering

CSR은 React의 기본 렌더링 방식으로, 브라우저에서 JavaScript가 실행된 후 데이터를 가져와 UI를 동적으로 구성한다. 렌더링의 주체는 클라이언트이다.

• 장점
  • 최초 로드 이후, 사용자 상호작용이 빠르고 부드럽다.
  • 서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋다.
  • 서버 부하가 적다.
• 단점
  • 첫 페이지 로딩 시간(TTV)이 길다.
  • JS가 로딩 되고 실행될 때까지 페이지가 비어있어 SEO에 불리하다.

02. SSG: Static Site Gerneration

SSG은 빌드 타임에 서버에서 HTML을 생성하여 클라이언트에게 정적 파일로 제공하는 방식이다. 최초 빌드 시에만 생성되며, 사전에 미리 정적 페이지를 만들고 클라이언트(브라우저)가 해당 페이지를 요청하면 만들어져있는 페이지를 바로 제공한다.

• 장점
  • 첫 페이지 로딩 시간(TTV)이 매우 짧아 사용자가 빠르게 페이지를 볼 수 있다.
  • SEO에 유리하다.
  • CDN(Content Delivery Network) 캐싱이 가능하다.
• 단점
  • 정적인 데이터에만 사용할 수 있다.
  • 사용자와의 상호작용이 서버와의 통신에 의존하므로, CSR보다 상호작용이 느릴 수 있다.
  • 서버 부하가 클 수 있다.
  • 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우에는 사용이 불가능하다.

03. ISR: Incremental Static Regeneration

ISR은 SSG의 단점을 보완하기 위해 특정 시간 간격으로 정적 페이지를 갱신하는 방식으로, 정적 페이지를 먼저 보여주고 필요에 따라 서버에서 페이지를 재생성한다. 즉, SSG처럼 정적 페이지를 제공하지만, 설정한 주기만큼 페이지를 계속 생성해준다.

• 장점
  • 정적 페이지를 먼저 제공하므로 UX가 좋으며, 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하므로 최신 상태를 (그나마) 유지할 수 있다.
  • CDN 캐싱이 가능하다.
• 단점
  • 동적인 콘텐츠를 다루기에 한계가 있을 수 있습니다.
  • 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용이 불가능하다.

04. SSR: Server Side Rendering

SSR은 요청이 들어오면 서버에서 HTML을 완성한 후 클라이언트에 전달하는 방식으로, SSG, ISR처럼 렌더링 주체가 서버이다.

• 장점
  • 빠른 로딩 속도(TTV)와 높은 보안성을 제공한다.
  • SEO 최적화 좋다.
  • 실시간 데이터를 사용한다.
  • 마이페이지 처럼 데이터에 의존한 페이지 구성 가능하다.
• 단점
  • 사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야 하는데, 이 과정이 시간이 오래 걸릴 수 있습니다.
  • 요청할 때 마다 페이지를 만들어야 한다.
  • CDN 캐싱이 불가능하다.

05. 렌더링 기법 비교 및 선택 기준

렌더링 방식	SEO	초기 로딩 속도	서버 부하	사용 예시
CSR	낮음	느림	낮음	대시보드, 사내 도구
SSR	높음	보통	높음	뉴스 사이트, 로그인 필요 서비스
SSG	높음	빠름	없음	블로그, 마케팅 페이지
ISR	높음	빠름	낮음	상품 페이지, 자주 변경되는 콘텐츠

06. 렌더링 방식 구현하기

• SSG: cache : force-cache

//fetch API

fetch("url", {
   cache: "force-cache"
})

• ISR: next: {revalidate: (n초) }

//fetch API

fetch("url", {
	next: {           
		revalidate: 3,  //3초마다 갱신
	}
})

• SSR: cache: "no-store"

//fetch API

fetch("url", {
	cache: "no-store"
})

• CSR: "use client"

1. 최상단에 "use client" 작성
2. useState, useEffect 같은 클라이언트 훅은 무조건 클라이언트 컴포넌트 안에서만 사용

MPA / SPA 참고 사이트 1
Next.js 렌더링 참고 사이트 1
Next.js 렌더링 참고 사이트 2