[NEXT] next.js와 렌더링 방식

boyon99·2023년 7월 19일

목록 보기

1/3

next.js란?

서버 사이드 렌더링(SSR), 동적 라우팅 등을 아주 손쉽게 사용할 수 있도록 해주는 강력한 리액트 프레임워크이다.

서버 사이드 렌더링 지원
기본적으로 사전 렌더링 지원
서버 사이드 렌더링으로 인한 검색 엔진 최적화
동적 라우팅 지원
간단한 API 서버 구축 지원
이미지, 폰트 최적화 지원
기본적으로 타입스크립트 지원
코드 분할 지원
서버 사이드 렌더링 + 사전 렌더링 + 코드 분할로 인한 빠른 로딩

렌더링의 방식

클라이언트 사이드 렌더링 (CSR)

기본적으로 SPA 는 클라이언트 사이드 렌더링 방식으로 구현되고 있다. CSR로 구현된 페이지는 html 만 보았을 때는 요소들이 비워져 있으며 사이트에 사용자가 접속해서, 자바스크립트가 실행되는 순간 요소들이 채워지기 시작한다. 그래서 요소들을 그리는 주체가 클라이언트라는 점에서 클라이언트 사이드 렌더링이라고 말한다.

단점

사용자가 첫 화면을 보기까지의 시간이 오래 걸림 (화면을 그리는 자바스크립트가 실행되기 전까지 사용자는 빈 화면을 보아야 함)
HTML 이 비어있기 때문에, 검색 엔진이 우리 페이지의 정보를 원활하게 수집할 수 없음

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 말그대로 요소들을 그리는 주체가 서버가 되는 것이다.

사용자가 사이트에 접속하는 순간, 서버 (HTML 을 공급하는 서버)는 HTML 에다가 요소들을 그리고, 요소들이 그려진 HTML 파일과 함께 필요한 자바스크립트 코드를 사용자에게 보낸다. 그러면 사용자가 받는 파일은 빈 파일이 아니라, 요소들이 채워져있는 HTML 파일이 된다. 다만 요소들이 그려져 있다고 해서 실제로 사용자와의 인터렉션 (클릭 등) 이 가능한 것은 아니다.

장점

페이지 로딩이 빨라짐
검색 엔진 최적화 (SEO) 가 가능

단점

서버가 요소를 그려야 하기 때문에, 서버에 부하가 걸림
사용자가 사이트를 본 순간 (Time To View) 과 인터렉션이 가능한 순간 (Time To Interact) 의 차이가 발생함 (요소가 그려지기만 하고, 아직 자바스크립트 코드가 실행되지는 않았기 때문)
새로고침 시 페이지를 다시 서버에서 받아와야 하기 때문에, 새로고침 시 화면이 비었다가 채워지는 Blinking Issue 가 발생

정적 생성 (Static Site Generation, SSG)

Next.js 의 핵심적인 기능 중 하나로 Static Generation 이란 특정 페이지의 HTML을 빌드할 때 미리 그려놓는 것을 말한다. 즉, 사용자가 사이트에 접속할 때마다 서버가 직접 HTML을 그리는 것이 아니라, 미리 그려놓은 채로 해당 HTML을 저장해놓고, 사용자가 사이트에 접속하면 저장해놓은 HTML을 공급하는 것이다.

Next.js 는 컴포넌트가 따로 외부에서 데이터를 가져오지 않는 한, 항상 static generation 방식으로 사전 렌더링을 진행한다. (따로 설정을 해주면, 외부에서 데이터를 가져오더라도 static generation 방식으로 렌더링해줄 수 있다.)

단점