[WEB] 클라이언트 사이드 렌더링(CSR)과 서버사이드 렌더링(SSR)

 

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

 

클라이언트에서 모든 것을 처리하는 방식

JavaScript를 사용하여 클라이언트에서 웹 페이지를 렌더링하는 프로세스

서버는 초기 HTML 파일을 전송하고, 클라이언트는 JavaScript로 동적으로 페이지를 업데이트.

이를 통해 클라이언트가 전체 페이지를 다시 로드하지 않고도 페이지의 특정 부분을 업데이트 할 수 있음

→ 상호 작용적이고, 반응성이 뛰어난 웹페이지를 만들 수 있음. 즉, 사용자가 웹사이트를 볼 수 있음(TTV)과 동시에 클릭하거나 인터랙션이 가능함(TTI)

 

CSR의 대표적인 프레임워크 React

👍🏻 장점:

• 상호작용적이고 동적인 웹 어플리케이션
• 매끄럽고 원할한 사용자 경험을 제공
• 추가 서버 요청의 필요성을 줄임

👎🏻 단점 :

• 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 점
• Low SEO(Search Engine Optimization) : 검색 엔진이 클라이언트 렌더링을 인덱싱하는 데 어려움을 겪을 수 있음

💁🏻‍♀️ 첫 번째로 사용자가 보기 위해서 필요한 정말 필수적인 JS만 보낼 수 있을지 고민해 보면 좋음

💻 사용 사례:

소셜 미디어나 전자 상거래 웹사이트와 같은 상호작용이 많은 어플리케이션

 

---

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

웹 페이지를 서버에서 렌더링하고, 완전한 HTML을 클라이언트로 전송하는 방식

 

서버가 동적 데이터를 포함하여 HTML을 생성해 완전한 페이지로 클라이언트한테 전송하고, 클라이언트는 별도의 처리없이 페이지를 표시.

 

SSR의 대표적인 프레임워크 Next.js

👍🏻 장점:

• 초기 로드 시간 단축
• 모든 컨텐츠가 HTML에 담겨져있기 때문에 좀 더 효율적인 SEO
• 인터넷 연결이 느리거나 기기 성능이 낮은 사용자에게 더 나은 사용자 경험 제공

👎🏻 단점:

• Static Sites에서 발생했던 깜박임 이슈가 여전히 존재. (전체적인 웹사이트를 다시 서버에서 받아오는 것과 동일하기 때문)
• 서버에 과부하가 걸리기 쉬움
• 사용자가 빠르게 웹사이트를 확인할 수 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 여기저기 클릭했는 데 반응이 없는 경우 발생할 수 있음

💁🏻‍♀️ SSR는 사용자가 사이트를 볼 수 있는 시간과 실제로 인터랙션을 할 수 있는 시간의 공백기간이 꽤 긴 편이다.

사용자가 보고 인터랙션하는 이 시간의 단차를 줄이기 위해서 어떤 노력을 할 수 있을지 고민해 보면 좋음 

💻 사용 사례:

블로그, 뉴스 사이트 등 콘텐츠 중심의 웹사이트

 

 

출처:

https://www.youtube.com/watch?v=iZ9csAfU5Os&t=115s&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9

https://www.geeksforgeeks.org/server-side-rendering-vs-client-side-rendering-vs-server-side-generation/