서버 사이드 렌더링이 생소할 수도 있지만 사실 SSR은 웹 페이지를 제공하는 가장 흔한 방법이다. PHP, Ruby, Python과 같은 언어의 경우에는 HTML 페이지를 웹 브라우저로 전송하기 전에 서버에서 전부 렌더링한다. 그리고 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링한다.
Next.js도 마찬가지로 각 요청에 따라 서버에서 HTML 페이지를 동적으로 렌더링하고 웹 브라우저로 정송할 수 있다. 또한 서버에서 렌더링한 페이지에 스크립트 코드를 집어 넣어서 나중에 웹 페이지를 동적으로 처리할 수도 있는데 이를 하이드레션이라고 한다.
블로그 사이트를 만들어서 어떤 사람이 작성한 모든 글을 한 페이지에 렌더링한다고 생각해보자. 사용자가 페이지에 접근하면 서버는 페이지를 렌더링해서 결과로 생성한 HTML 페이지를 클라이언트로 전송한다. 그리고 브라우저는 페이지에서 요청한 모든 스크립트를 다운로드한 다음 DOM 위에 각 스크립트 코드를 하이드레이션한다. 그래서 페이지를 새로 고치지 않고도 아무 문제 없이 사용자와 웹피이지가 상호 작용할 수 있다. 리액트 하이드레이션 덕분에 이 상태에서 웹 앱은 싱글 페이지 애플리케이션처럼 작동할 수 있다. 클라이언트 사이드 렌더링과 서버 사이드 렌더링의 장점을 모두 가지는 것이다. 특정 렌더링 전략만 사용한다고 가정하면 SSR은 리액트의 CSR에 비해 여러가지 장점이 있다.
1. 더 안전한 웹 애플리케이션
페이지를 서버에서 렌더링한다는 것은 쿠키 관리, 주요 API, 데이터 검증 등과 같은 작업을 서버에서 처리한다는 듯이며, 중요한 데이터를 클라이언트에 노출할 핑요가 없기 때문에 더 안전하다.
2. 더 뛰어난 웹 사이트 호환성
클라이언트 환경이 자바스크립트를 사용하지 못하거나 오래된 브라우저를 사용하더라도 웹 페이지를 제공할 수 있다.
3. 더 뛰어난 SEO
클라이언트에서 서버가 렌더링한 HTML 콘텐츠를 받기 때문에 봇이나 웹 크롤러 같은 검색 엔진 웹 문서 수집가가 페이지를 렌더링할 피요가 없다. 그 결과로 웹 애플리케이션의 SEO 점수가 높아진다.