CSR에 관해 질문드립니다.

안녕하세요, snowdrop6342 님. 공식 서포터즈 codesweaver 입니다.
.
CSR, SSR 은 화면을 그리는 작업을 서버가 처리하는지, 클라이언트가 처리하는지를 말합니다. 여기서 클라이언트는 클라이언트 서버 라기 보다는 브라우저로 이해하시는게 맞습니다.

1. SSR은 서버에서 화면과 관련한 내용을 모두 작성한 후 클라이언트에 전달해서 브라우저가 이를 단순히 표시하는것을 말하고, CSR은, 서버가 클라이언트의 요청에 맞는 최소한의 데이터만 응답해주고, 이를 브라우저가 해석, 화면에 그리는 작업을 모두 도맡아 하는것을 말합니다.

2. 대체적인 흐름은 말씀하신것처럼 클라이언트->서버->DB->서버->클라이언트 단계를 거치는게 맞습니다. SSR이 클라이언트가 HTML페이지 전체를 요청하여 브라우저가 해석하는 단계라면, CSR은 JSON 형태로 필요한 데이터를 요청, JSON 형태로 데이터를 응답받아 이를 자바스크립트 등의 언어로 해석하여 HTML을 생성하는 과정이라고 생각하시면 됩니다. HTML 페이지 전체보다는 필요한 데이터를 조금씩 요청하는것이 용량을 적게 먹기때문에 SSR은 트래픽적인 면에서 리소스 소모가 적다고 보시면 됩니다 (서버가 소모해야할 리소스를, 클라이언트에게 위임한다고 해도 맞는말이긴 하지요)

.

햄버거 가게를 생각해보겠습니다. SSR은 햄버거 가게에서 햄버거를 만들어 손님에게 전달합니다. CSR은 햄버거를 만들 수 있는 레시피를 손님에게 건네주고 알아서 해먹으라고 말하는 겁니다. 이 햄버거 가게에 손님이 수만명정도 몰린다고 하면, 전자의 가게는 마비되고 말겠죠? 후자의 가게는 그나마 버틸 여력이 있을겁니다. 햄버거 가게가 지어야 하는 부담이 상당히 적기 떄문입니다. 햄버거 가게가 지어야할 부담을 손님들이 나누어 갖게 되니까요.

3. 백엔드 개발자의 경우 타임리프를 이용하여 포트폴리오를 만드는것도 괜찮습니다. 프론트쪽으로 알아야 할 기술이라면.. HTML5 표준에 맞는 태그 작성법, 기초적인 CSS, 그리고 자바스크립트 정도는 학습하셔야 그럴싸해 보이고 사용자와 상호작용할 수 있는 애플리케이션을 만드실 수 있습니다. 보통 백엔드 개발자의 경우 '부트스트랩'이라고 하는 CSS 프레임워크를 많이 사용하는 편입니다. CSS를 깊게 알지 않아도 그럴듯한 사이트를 만들 수 있도록 도와주기 때문입니다.

.
감사합니다.

궁금했던 부분이 확실히 이해가 됐습니다.

비유까지 들어주시면서 정말 자세히 설명해주셔서 감사합니다!!