웹 페이지 렌더링 방식에는 대표적으로 CSR, SSR, SSG 세가지가 있다.
각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 조사해본다.
CSR(Client-Side Rendering)
웹 브라우저에서 자바스크립트로 HTML을 만드는 방식이다.
리액트로 할 수 있는 가장 기본적인 방식의 렌더링이며, 자바스크립트로 변환된 리액트 코드(JSX)를 웹 브라우저에서 실행해서 HTML을 만드는 것이다.
동작 방식
1. 클라이언트가 페이지를 요청한다.
2. 서버에서는 최소한의 HTML 문서(script, meta, link 등의 태그를 포함한 빈 컨텐츠의 index.html)를 클라이언트에 전달한다.
3. 클라이언트가 HTML 문서에 포함된 정적 리소스(CSS, 이미지 등), 번들 자바스크립트 파일을 다운로드한다.
4. 클라이언트에서 번들 자바스크립트 파일을 실행한다. 아직 API에서 데이터를 받아오지 않았기 때문에 로딩화면 혹은 임시 데이터가 표출된다.
5. 페이지 렌더링이 완료된 후, API 요청 코드가 실행된다.
6. 받아온 데이터로 state를 업데이트하고 페이지를 리렌더링한다.
7. 페이지 인터렉션이 가능해진다.
사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링 한다.
특징
- 렌더링에 필요한 리소스와 번들 자바스크립트 파일을 다운로드 한 후 화면을 그리는 데 걸리는 시간이 길기 때문에, 최초 페이지 로딩 시간이 오래 걸린다.
- 페이지 렌더링을 위한 정적 리소스와 번들 자바스크립트 파일이 사전(최초 페이지 접근 시)에 로드되어있고, 이후에는 필요한 부분만 추가로 요청하기 때문에 후속 페이지 로드 시간이 더 빠르다.
- 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다.
- 번들 자바스크립트 실행 완료 후, API 응답을 받아오기 전까지는 빈 화면 혹은 별도로 설정한 로딩 화면이 표출된다.
사용자에게 있어서 API 응답을 받아오기 전 까지는 인터렉션이 불가하므로, 아예 화면이 보이지 않는 것이 직관적일 수 있다. 그러므로 사용자 인터렉션이 중요한 웹사이트라면 CSR 방식이 적합하다.
SSR(Server-Side Rendering)
서버에서 HTML을 만들고 리스폰스로 보내주는 것이다.
백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식이다.
Next.js를 통해 리액트 서버사이드 렌더링을 편하게 구현이 가능하다.
동작 방식
1. 클라이언트가 페이지를 요청한다.
2. 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일하여 클라이언트에 전달한다.
3. 클라이언트에서는 해당 HTML 파일을 다운로드하여 화면을 그린다. 이 때 사용자는 렌더링된 페이지를 볼 수는 있지만 인터렉션은 할 수 없다.
4. 클라이언트에서는 자바스크립트 파일을 다운로드하여 실행한다.
5. 페이지 인터렉션이 가능해진다.
사용자가 페이지를 이동할 때마다 위의 과정이 반복된다.
특징
- 요청한 페이지에 필요한 리소스만 다운로드하여 페이지를 생성하기 때문에 최초 페이지 접근이 빠르다.
- 최초 페이지 접근이 빨라 화면을 바로 확인할 수는 있지만, 자바스크립트 실행이 완료되기 전까지는 사용자 인터렉션이 불가능하다.
- 페이지를 이동할 때마다 해당 페이지에
필요한 리소스를 다운로드+페이지를 생성하는 과정을 반복하므로 페이지 이동에 걸리는 시간이 더 길다.
서버에서 빈 HTML 문서가 아닌 완성된 HTML 문서의 페이지를 생성하여 전달하므로 검색엔진에서는 보다 많은 정보를 수집할 수 있다. 따라서 검색엔진 최적화(SEO)에 용이하다.
SSG(Static Site Generator)
미리 HTML 파일을 만들어서 서버를 배포하고, 서버에 리퀘스트가 들어오면 이미 만들어진 HTML 파일을 읽어서 리스폰스로 보내주는 방식이다.
데이터가 거의 바뀌지 않는다면 미리 HTML 파일로 만들고 서버로 배포하는 방법이 적합할 수 있다.
개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않으며, HTML 파일의 생성시점이 빌드 타임이다.
동작 방식
- 클라이언트가 페이지를 요청한다.
- 서버에서 엣지 캐싱(edge caching)된 HTML 클라이언트로 반환해 준다.
- 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 한다.
엣지 캐싱(edge caching)이란,
최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐싱 서버를 사용하는 것이다. 대표적인 예시는 CDN.
특징
- 미리 만들어 둔 페이지를 클라이언트에게 제공하므로 렌더링 속도가 매우 빠르다.
- SSR과 마찬가지로 완성된 페이지를 클라이언트에게 전달하므로 SEO에도 친화적이다.
- 모든 url에 대해 개별 HTML 파일을 생성해야 하기 때문에 url을 미리 예측할 수 없거나 양이 너무 많으면 적용이 어렵다.
블로그, 정보 전달 페이지와 같이 데이터가 많이 바뀌지 않는, 정적인 데이터를 보여주는 페이지에 적합하다.
참고 자료
https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg#ssr-1
https://guiyomi.tistory.com/125
