[Web] 렌더링 종류

렌더링 종류

서버로부터 받아와 전체 페이지를 렌더링하는 서버사이드 렌더링(SSR), 클라이언트에서 필요한 부분만 렌더링하는 클라이언트사이드 렌더링(CSR)로 구분된다.

 

SSR (Server Side Rendering)

SSR은 서버 영역에서 렌더링 과정을 수행하는 것이다.

• 사용자가 웹 페이지에 접속 시, 해당 페이지에 대한 요청이 서버로 전달되면, 서버 측에서 필요한 html, css, js를 이용하여 페이지를 렌더링한 뒤에 클라이언트로 보내준다. (서버에서 완전한 html 페이지를 만들어 제공)

동작원리

1. 사용자가 웹 페이지 방문 시, 서버는 리소스를 확인하여 페이지 내에 있는 서버 측 스크립트를 실행 후 HTML 컨텐츠를 컴파일한다.
2. 컴파일된 HTML을 브라우저로 전송한다.
3. 브라우저는 HTML을 다운받아, 사용자가 페이지를 볼 수 있도록 한다.
4. 브라우저는 js를 다운받아, 페이지를 인터랙티브하게 만든다.
5. 사용자가 페이지를 이동할 경우, 위 동작을 반복한다.

장점

• 초기 페이지 로딩 속도가 빠르다.
• SEO (검색 엔진 최적화) 유리: 서버에서 완성된 html 파일을 보내주기 때문에 검색 엔진 최적화에 유리하다.

단점

• 화면 깜빡임 현상: 화면에 변화가 생길 때마다 서버에서 파일을 보내주고 다시 화면을 구성하기 때문에 화면 깜빡임이 발생할 수 있다.
• 서버 과부하: 화면 전환이 있을 때마다 서버에 요청하여 받아오기 때문에 서버 과부하가 발생할 수 있다.

CSR (Client Side Rendering)

CSR은 클라이언트 영역에서 렌더링을 수행하는 방식이다.

• 사용자가 웹 브라우저를 통해 웹 사이트를 방문하였을 때, 웹 사이트에서 제공하는 웹 페이지에 대한 html, css, js와 같은 리소스들을 클라이언트 측에서 다운로드 받고, 페이지 전환에 대해 클라이언트 측에서 처리하는 방식이다.

동작원리

1. 사용자가 웹 페이지를 방문하면, 브라우저는 빈 html 파일을 다운 받는다.
2. 서버로부터 html 파일을 받아온 뒤, 웹 사이트 화면을 구성하는 데 필요한 추가적인 데이터를 서버에서 다시 다운 받는다.
3. 사용자가 페이지를 이동할 경우, 추가로 서버에 요청하지 않고, 이미 다운받은 js를 이용하여 렌더링한다.

장점

• 초기 페이지 로딩 후에는 페이지 이동이 빠르다.
• 페이지 간 이동 시, 깜빡임이 존재하지 않아 네이티브 앱과 비슷한 경험이 가능하다.
• 서버 부하가 적다.
• TTV와 TTI의 공백기간이 짧다. (TTV: 사용자가 화면을 보는 시점 / TTI: 사용자가 실제로 서비스를 이용하는 시점)

단점

• SEO 친화적이지 않다.
• 초기 페이지 로딩 속도가 느리다.
• 클라이언트 측에서 보안에 좋다.

 

SSG와 ISR

SSG (Static Stie Generation)

빌드 타임에 js를 변환하여 미리 만들어두어, 요청이 들어오면 이미 완성된 html을 반환하는 형식이다.

 

동작원리

1. SSR처럼 서버로부터 html을 받아오며, 빌드 과정에서 html 파일을 생성한다.
2. 화면을 서버에서 미리 만들어 전송해주는 방식이다.

장점

• 페이지 로딩 속도가 빠르다. (TTV가 빠르다)
• SEO 친화적이다.
• 보안이 좋다.

단점

• 정적 파일로 제공이 되기 때문에, 사용자별 데이터 제공이 어렵다.

ISR (Incremental Static Regeneration)

빌드 시점에 페이지를 렌더링한 후, 설정한 시간마다 페이지를 새로 렌더링 한다. (SSG 하위 개념)

 

동작원리

1. 페이지 처음 방문하면, SSG와 같은 방식으로 보여준다.
2. revalidate 시간이 지나면, 해당 페이지만 서버사이드에서 다시 빌드한다. (백그라운드에서 API를 접속하기 때문에, 클라이언트 쪽에 보이는 데이터는 변함이 없음)
3. revalidate 시간 후 새로고침을 누르면, ISR이 페이지를 재 빌딩하는 시간 후에 렌더링 되기 때문에 실제 시간보다 1초 늦게 보인다. (페이지 재 빌딩이 1초 걸린다는 뜻)

장점

• 페이지 로딩 속도가 빠르다. (TTV가 빠르다)
• SEO 친화적이다.
• 보안이 좋다.
• 데이터가 주기적으로 변경된다.

단점

• 실시간 데이터가 아니다.
• 사용자별 데이터 제공이 어렵다.

 

출처

https://itsmekyum.tistory.com/15