Next.js의 서버 사이드 렌더링(SSR)

Next.js? 왜 쓰는 것일까?

Next.js는 클라이언트 사이드 렌더링(CSR) 방식인 React를 서버 사이드 렌더링(SSR) 방식으로 구현할 수 있도록 도와주는 프레임워크이다.

 

리액트를 쓰면서 왜 굳이 또 Next.js 프레임워크를 사용하는 것일까? Next.js를 통해 얻는 가장 큰 장점은, 검색 엔진 최적화(Search Engine Optimization)를 위한 서버 사이드 렌더링(Server Side Rendering)을 가능하게 하기 때문이다. 거기에 프리 렌더링을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주는 점도 Next.js를 사용하는 이유이다.

 

프리 렌더링은 서버 사이드 렌더링(SSR) 뿐만 아니라 정적 사이트 생성(SSG)으로도 가능하다. Next.js는 싱글 페이지 앱(SPA)이며 정적 사이트 생성(SSG)을 기본으로 사용하고, SSR을 사용할 수 있는 것을 기억하자. 기본적으로 SSG를 사용하기 때문에 빌드 시점에만 서버 사이드에서 프리 렌더링(Pre-rendering)한 파일들을 보내주고, 그 이후에는 CSR로 페이지를 이동한다.

 

 

Next.js의 SSR 실행과정 (+Hydration)

그렇다면 Next.js는 어떻게 렌더링 되는걸까? 앞에서 말한 것처럼 Next.js는 모든 페이지를 미리 렌더링(Pre-rendering)한다. 각 페이지의 HTML을 미리 생성해둔다는 의미이다. 이때 생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결되며, 연결되는 것을 Hydration이라고 한다. 이후 브라우저에 의해 페이지가 로드되면, 그때 자바스크립트 코드가 실행되어 페이지와 유저가 상호작용할 수 있게 되는 것이다.

 

Next.js 에서 프리 렌더링 하는 방식은 2 가지로 나뉘며, HTML 생성 시점의 차이가 존재한다.

1. SSG(Static Site Generation)

빌드 타임에 HTML이 생성되어 매 요청마다 이를 재사용한다. 즉, 빌드 시점 이후에는 서버에게 따로 요청을 하지 않는다. -> 데이터가 자주 바뀌지 않는 블로그 글이나 상품 정보 페이지 등에서 사용된다.

2. SSR(Server Side Rendering)

매 요청마다 HTML을 생성한다. 여기서의 '매 요청'은 웹 사이트의 페이지를 접속하거나 페이지를 새로고침 할때 발생하는 요청이다. SSR 방식에서는 클라이언트의 각 요청마다 서버가 해당 페이지의 데이터와 리소스를 가져와서 HTML을 동적으로 생성한다. -> 내용이 자주 업데이트 되어야 할 때 주로 사용된다.

 

 

Next.js에서 SSR의 실행 과정은 다음과 같다.

1. 사용자 요청:
   • 사용자가 브라우저에서 특정 페이지에 대한 요청을 하면, 요청은 Next.js 서버로 전송된다.
2. 서버 처리:
   • Next.js 서버는 요청을 받고, 해당 페이지에 대한 React 컴포넌트를 렌더링한다. 이 과정에서 필요한 데이터를 가져오기 위해 getServerSideProps 같은 데이터 페칭 함수가 호출될 수 있다.
3. HTML 생성:
   • 서버는 React 컴포넌트와 데이터를 사용하여 HTML 문서를 생성한다. 이 HTML은 초기 상태를 포함하며, 클라이언트 측 JavaScript를 실행할 준비가 되어 있는 상태이다.
4. 클라이언트에 응답 전송:
   • 생성된 HTML 문서는 사용자의 브라우저로 전송된다. 사용자는 서버에서 렌더링된 페이지를 볼 수 있다.
5. 브라우저에서 JavaScript 실행:
   • 사용자의 브라우저에서 JavaScript가 실행되면서 페이지가 완전히 상호작용 가능한 상태가 된다(하이드레이션). 이 단계에서는 클라이언트 측 JavaScript가 서버에서 렌더링된 마크업을 "살아있게" 만들고, 이벤트 핸들러나 추가적인 클라이언트 측 로직을 연결한다.
6. 페이지 상호작용:
   • 이제 사용자는 페이지와 상호작용할 수 있으며, 페이지 내의 다른 링크나 동적 기능들을 사용할 수 있다. 추가 페이지 요청은 Next.js의 클라이언트 사이드 라우팅을 통해 처리될 수 있으며, 이 경우 서버로의 요청 없이 클라이언트 측에서 라우팅이 처리된다.

 

요약하면, 기본적으로 CSR 방식인 리액트로만 만들면 SEO에 취약한 점이 있어서 Next.js를 도입해 프리 렌더링을 통해 SSR 또는 SSG를 가능하게 하여 성능과 SEO를 개선하는 것이다. 그 외에도 페이지 기반 라우팅 등의 장점을 통해 리액트만 사용하는 프로젝트에 비해 성능을 향상시키고 개발자들이 편하게 개발할 수 있도록 해주기 때문에 인기가 많은 것 같다.