[기타] CSR & SSR

Thymeleaf에 대해 알아보다가, Thymeleaf는 서버사이드 렌더링 방식으로 렌더링 된다는 내용을 봤다.

렌더링, 클라이언트 사이드 렌더링 (CSR) & 서버 사이드 렌더링 (SSR)에 대한 내용 정리! ✨✏️

---

🎨 렌더링 (Rendering )

html,css,javascript등의 코드를 사용자가 볼 수 있도록 변환해주는 과정을 말한다.

 

 🖥️ 클라이언트 사이드 렌더링(CSR, Client-Side Rendering )

- CSR은 서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링한다.

- 클라이언트에서 데이터(전체)를 받아오고 렌더링하기 때문에 초기 로딩 속도는 느리지만, 이후에는 페이지 이동이 빠르고 사용자 경험을 향상시키는 등의 이점이 있다.

- CSR은 클라이언트에서 캐시를 사용하여 적은 양의 데이터만 다시 요청하여 처리하는 것이 가능하다.

 

🖥️ 서버 사이드 렌더링(SSR, Server-Side Rendering )

- 서버에서 페이지를 렌더링한 후에, 클라이언트에게 전달되며, 클라이언트에서는 추가적인 JavaScript 로딩이 필요하지 않다.

- SSR은 초기 로딩 속도가 빠르고(첫 페이지에 대한 데이터만 가져오기 때문), SEO에 유리하며, 서버에서 데이터를 처리하므로 보안성이 높다. 

- 그러나, 페이지 이동이 느리고, 서버에서 처리하기 때문에 서버의 부하가 증가할 수 있다.

---

 

아래 블로그에 자세히 내용이 정리되어 있어서, 참고하면 좋을 듯 :)

 

출처 및 참고:

https://suzzeong.tistory.com/139

클라이언트 사이드 렌더링(CSR) vs 서버 사이드 렌더링(SSR)