브라우저 렌더링은 크게 CSR(Client Side Rendering)과 SSR(Server Side Rendering)으로 나뉜다.

SSR

SSR은 서버로부터 완전한 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식이다.

과정을 보면

1. 클라이언트가 초기 화면을 로드하기 위해 서버에 요청
2. 서버는 화면에 필요한 데이터를 삽입하고 css까지 모두 적용해 html과 js 코드를 브라우저에 전달
3. 브라우저에서는 전달 받은대로 렌더링. 그러나 사이트 자체는 조작 불가
4. 클라이언트가 js를 다운받음
5. 다운 받는 중 유저는 페이지를 볼 수는 있지만 사이트를 조작할 수는 없다. 이때 사용자 조작을 기억한다.
6. 브라우저가 js를 실행한다.
7. 완전한 페이지 기능을 한다. (기억했던 사용자 조작을 실행한다)

-> 화면을 그리는 주체가 서버이다. 화면에서 어떤 부분을 변경하려면 서버에서 새로운 파일을 받아야 한다. 따라서 서버에 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜박인 후 렌더링된다.

장점

• SEO 최적화가 쉽다.
  모든 데이터가 클라이언트에 보낸 html에 담겨 있기 때문에 검색 엔진에 잘 노출된다.
• 빠른 초기 로딩
  모든 페이지를 처음에 로딩하는 CSR에 비해 초기 로딩 속도가 빠르다.

단점

• 사용자 경험
  -초기 로딩 속도가 빠르지만 이것으로 인해 단점이 생기기도 한다. TTV(Time to View)와 TTI(Time To Interact) 간에 시간 간격이 생겨 사용자가 화면에 보이는대로 클릭하더라도 아무런 반응이 없을 수 있다.
  -또한 새로운 요청을 할 때마다 새로고침하기 때문에 화면이 깜박인다.
  
• 서버 부담 증가
  페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해 응답해야 하기 때문에 서버 부담이 증가한다.

---

CSR

CSR은 기본적으로 클라이언트에서 html 페이지를 준비하고 필요한 데이터만 서버에 요청해 페이지를 구성한다.

과정은 다음과 같다.

1. 클라이언트에서 초기화면을 로드하기 위해 프런트에 요청
2. 클라이언트가 html과 js를 다운받음
3. 다운된 js가 실행됨. 이때 데이터를 위한 api 호출됨.
4. 서버가 클라이언트의 요청에 응답.
5. 페이지 완성

장점

• 네이티브 앱과 비슷한 빠른 상호작용을 구현할 수 있다.
  -렌더링을 클라이언트에게 담당시킴으로서 서버 부하를 줄이고, 사용자에게 더 빠른 상호작용을 제공한다.
  -새로고침이 발생하지 않는다.
  

단점

• 첫 페이지 로딩 속도가 SSR에 비해 다소 느리다.
  -서버에 첫 요청 시 전체 페이지에 대한 모든 문서를 받다 보니 첫 화면만 가져오는 SSR에 비해 속도가 느리다.
• SEO에 대한 추가 보완 작업이 필요하다.
  -검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 있다. 구글의 경우 최근 js엔진이 내장되어 있어 크롤링이 된다고 하지만 다른 경우 빈 html으로 인식한다.