TIL

---

What I Learn?

1) 서버 사이드 렌더링 (SSR)

서버 사이드 렌더링이란 말 그대로 서버에서 렌더링 작업 하는 것을 의미한다.

전통적인 웹 방식은 서버 사이드 렌더링 (SSR) 방식이었다.

즉, 서버는 브라우저에 나타나는 형태 그대로를 HTML 로 만들어 제공하고, 브라우저는 HTML 을 표시하는 방식이었다.

지금도 어떤 웹들은 페이지 내에서 다른 곳으로 라우팅할 때 마다 화면이 깜빡! 거리면서 전체 페이지가 로드되는 모습을 볼 수 있는데 이러한 웹들이 바로 서버 사이드 렌더링 방식을 사용하는 웹이라고 할 수 있다. (Static Site)

1-1. 장점

1. 검색 엔진 최적화 (SEO => Search Engine Optimization) 가 가능해진다.

2. 초기 로딩 속도가 빠르다. (서버에서 첫 렌더링 된 HTML 을 클라이언트에게 전달해주기 때문에 초기 로딩속도가 빨라짐)

1-2. 단점

1. Blinking Issue (라우팅시 화면이 깜빡이는 현상) 으로 인한 사용자 경험이 부족해진다.

2. 서버 과부화 (사용자가 요청을 보낼 때 마다 서버에서 HTML 을 가공해서 보내야 하기 때문)

---

2) 클라이언트 사이드 렌더링

클라이언트 사이드 렌더링이란 말 그대로 클라이언트에서 렌더링 작업 하는 것을 의미한다.

클라이언트 사이드 렌더링은 사용자의 서버 사이드 렌더링과 반대라고 생각하면 된다.

서버는 JSON 파일만 클라이언트에게 보내주고, HTML 을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행하는 것이다.

사용자의 행동에 따라 필요한 부분만 다시 읽어드리기 때문에 서버 측에서 리렌더링하여 전체 페이지를 다시 읽어들이는 것 보다 더 빠른 인터렉션을 기대할 수 있다.

2-1. 장점

1. 불 필요한 트래픽의 감소 (필요한 데이터만 요청하기 때문)

2. 더 나은 사용자 경험 (SSR 특유의 깜빡! 이는 현상이 없어 앱과 같은 경험이 가능)

2-2. 단점

1. 초기 로딩 속도가 느리다. (한 번에 많은 소스코드를 받아오기 때문)

2. 썩 좋지 않은 검색 엔진 최적화 (검색 엔진들은 HTML 을 분석해서 우리에게 맞는 정보를 제공하는데 CSR 은 애초에 HTML 이 텅텅 비어있기 때문에 낮은 SEO 를 경험할 수 밖에 없다. 하지만 구글은 어느정도 이를 개선했지만 아직 부족한 수준이라고 한다.)