CS스터디
[Web] 렌더링 종류
Codult
2024. 2. 4. 12:09
728x90
렌더링 종류
서버로부터 받아와 전체 페이지를 렌더링하는 서버사이드 렌더링(SSR), 클라이언트에서 필요한 부분만 렌더링하는 클라이언트사이드 렌더링(CSR)로 구분된다.
SSR (Server Side Rendering)
SSR은 서버 영역에서 렌더링 과정을 수행하는 것이다.
- 사용자가 웹 페이지에 접속 시, 해당 페이지에 대한 요청이 서버로 전달되면, 서버 측에서 필요한 html, css, js를 이용하여 페이지를 렌더링한 뒤에 클라이언트로 보내준다. (서버에서 완전한 html 페이지를 만들어 제공)
동작원리
- 사용자가 웹 페이지 방문 시, 서버는 리소스를 확인하여 페이지 내에 있는 서버 측 스크립트를 실행 후 HTML 컨텐츠를 컴파일한다.
- 컴파일된 HTML을 브라우저로 전송한다.
- 브라우저는 HTML을 다운받아, 사용자가 페이지를 볼 수 있도록 한다.
- 브라우저는 js를 다운받아, 페이지를 인터랙티브하게 만든다.
- 사용자가 페이지를 이동할 경우, 위 동작을 반복한다.
장점
- 초기 페이지 로딩 속도가 빠르다.
- SEO (검색 엔진 최적화) 유리: 서버에서 완성된 html 파일을 보내주기 때문에 검색 엔진 최적화에 유리하다.
단점
- 화면 깜빡임 현상: 화면에 변화가 생길 때마다 서버에서 파일을 보내주고 다시 화면을 구성하기 때문에 화면 깜빡임이 발생할 수 있다.
- 서버 과부하: 화면 전환이 있을 때마다 서버에 요청하여 받아오기 때문에 서버 과부하가 발생할 수 있다.
CSR (Client Side Rendering)
CSR은 클라이언트 영역에서 렌더링을 수행하는 방식이다.
- 사용자가 웹 브라우저를 통해 웹 사이트를 방문하였을 때, 웹 사이트에서 제공하는 웹 페이지에 대한 html, css, js와 같은 리소스들을 클라이언트 측에서 다운로드 받고, 페이지 전환에 대해 클라이언트 측에서 처리하는 방식이다.
동작원리
- 사용자가 웹 페이지를 방문하면, 브라우저는 빈 html 파일을 다운 받는다.
- 서버로부터 html 파일을 받아온 뒤, 웹 사이트 화면을 구성하는 데 필요한 추가적인 데이터를 서버에서 다시 다운 받는다.
- 사용자가 페이지를 이동할 경우, 추가로 서버에 요청하지 않고, 이미 다운받은 js를 이용하여 렌더링한다.
장점
- 초기 페이지 로딩 후에는 페이지 이동이 빠르다.
- 페이지 간 이동 시, 깜빡임이 존재하지 않아 네이티브 앱과 비슷한 경험이 가능하다.
- 서버 부하가 적다.
- TTV와 TTI의 공백기간이 짧다. (TTV: 사용자가 화면을 보는 시점 / TTI: 사용자가 실제로 서비스를 이용하는 시점)
단점
- SEO 친화적이지 않다.
- 초기 페이지 로딩 속도가 느리다.
- 클라이언트 측에서 보안에 좋다.
SSG와 ISR
SSG (Static Stie Generation)
빌드 타임에 js를 변환하여 미리 만들어두어, 요청이 들어오면 이미 완성된 html을 반환하는 형식이다.
동작원리
- SSR처럼 서버로부터 html을 받아오며, 빌드 과정에서 html 파일을 생성한다.
- 화면을 서버에서 미리 만들어 전송해주는 방식이다.
장점
- 페이지 로딩 속도가 빠르다. (TTV가 빠르다)
- SEO 친화적이다.
- 보안이 좋다.
단점
- 정적 파일로 제공이 되기 때문에, 사용자별 데이터 제공이 어렵다.
ISR (Incremental Static Regeneration)
빌드 시점에 페이지를 렌더링한 후, 설정한 시간마다 페이지를 새로 렌더링 한다. (SSG 하위 개념)
동작원리
- 페이지 처음 방문하면, SSG와 같은 방식으로 보여준다.
- revalidate 시간이 지나면, 해당 페이지만 서버사이드에서 다시 빌드한다. (백그라운드에서 API를 접속하기 때문에, 클라이언트 쪽에 보이는 데이터는 변함이 없음)
- revalidate 시간 후 새로고침을 누르면, ISR이 페이지를 재 빌딩하는 시간 후에 렌더링 되기 때문에 실제 시간보다 1초 늦게 보인다. (페이지 재 빌딩이 1초 걸린다는 뜻)
장점
- 페이지 로딩 속도가 빠르다. (TTV가 빠르다)
- SEO 친화적이다.
- 보안이 좋다.
- 데이터가 주기적으로 변경된다.
단점
- 실시간 데이터가 아니다.
- 사용자별 데이터 제공이 어렵다.
출처
728x90