SSR, CSR 개념에 대한 질문입니다

Question

안녕하세요. 웹 공부를 하기 시작한 학생입니다.영상 같은 걸로 스프링을 배우기 시작했는데,jsp나 thymeleaf 같은 템플릿 엔진을 쓰는 방식으로 배우고 있습니다.(이러한 방식을 서버 사이드 렌더링(SSR) 이라고 하나요?)아무튼 MVC 모델로 서버에서 페이지를 직접 만들어서 클라이언트에 보내주는 방식으로 배웠는데,이번에 서버를 REST API 방식으로 만드는 프로젝트를 하게 되었습니다.(이렇게 서버에서 데이터만 보내주고, 클라이언트에서 데이터를 꺼내 쓰는 방식을 클라이언트 사이드 렌더링(CSR)이라고 하죠?)근데 이러한 REST API 방식으로 만드는 게 익숙하지 않고, 여러가지 개념이 안 잡혀있는 것 같아서 선배님들께 몇가지 좀 여쭤보려고 합니다.1) SSR 방식으로 만들면 서버에서 템플릿까지 전부 만드는 것으로 알고 있는데, 그렇게 되면 프론트엔드 쪽은 무슨 일을 하는건가요? 이러한 방식으로 만들면 프론트엔드 쪽 비중이 많이 없어지게 되나요?2) 지금까지 Model과 여러가지 저장소(예를 들어, HttpRequest, HttpSession 등등)를 이용해서 페이지를 작성 해왔는데(예를 들어, 세션에 들어있는 사용자 객체를 jsp 같은 템플릿 페이지에서 사용한다던가 등등), CSR 방식으로 만들게 되면, 이러한 방식으로는 만들지 못하는 건가요?3) CSR 방식으로 만드는 경우, 예를 하나 들자면 세션을 이용한 로그인 기능을 만들 때, 페이지에서 세션 저장소를 바로 접근하는 게 아니고, 서버에서 세션에 접근해서 서버에서 사용자 객체를 꺼내서, 클라이언트에 사용자 객체만 넘겨주는 방식으로 만들어야 되는건가요?제가 아직 많이 부족해서 질문 중에 좀 이상한 부분이 있을 수도 있어서, 제가 얘기한 부분 중에 틀린 부분이 있다면 말씀해주시면 감사드리겠습니다.

코딩코더 · Accepted Answer

1) 간단히 생각하면 메뉴 이동때마다 해당 메뉴 페이지와 js, css 등을 서버로부터 받는 방식이라면 ssr 이라고 할 수 있습니다. csr의 경우 모든 조각 리소스를 초기 한번에 다 받아서 메뉴 이동 시에 미리 받은 리소스와 클라이언트 사이드의 추가 가공으로 화면을 생성, rest api 등 비동기 데이터 요청으로 화면 영역에 데이터를 랜더링 합니다.말씀하시는 것과 같이 프론트 비중이 줄어 들 수 있으나, 각 회사 업무 분담에 따라 달라질 수 있습니다. 옛 jsp 와 같은 방식의 개발이라면 디자인을 제외한 모든 부분을 풀스택으로 개발하는 경우가 많으니까요.엄밀히 따지면, 템플릿이 백엔드에 작성된다 하더라도 그 템플릿에 해당하는 화면 디자인, 레이아웃, 화면 이벤트 요소 처리는 프론트 라고 할 수 있으며.1차로 정적 페이지 작업본을 받아서, 백엔드에서 적절히 심는 작업을 하기도 합니다.

RWB · Answer

CSR과 SSR은 프론트엔드 렌더링의 책임 소재에 따른 구분입니다.CSR빌드 시 모든 페이지의 렌더링 로직이 번들된 JS, CSS 파일이 생깁니다.번들 파일이 모든 페이지의 정보를 담고 있어 초기 로딩이 길지만, 로딩 이후는 빠릅니다.SPA 사이트를 만들 때 유용합니다.create-react-app이 CSR로 빌드합니다.SEO에 불리합니다.SSR프론트엔드 서버가 존재하며, 각 페이지 렌더링을 해당 서버에서 수행하여 결과물을 제공합니다.번들 파일이 작아, 초기 로딩이 짧습니다.Serverless 서비스가 불가능합니다.React: Node.js 서버 필요JSP: Tomcat 등, JavaEE 컨테이너 필요SEO에 유리합니다.https://blog.itcode.dev/posts/2022/06/12/csr-ssr-ssg예전에 블로그에 관련 글 작성한 적이 있는데, 같이 첨부해드릴게요.

코딩코더 · Answer

2) crs방식을 어느 영역 레벨로 구현하는냐 따라 달라집니다. 예전 레거시 방식의 jsp 방식으로 개발하고 데이터만 비동기 ajax나 rest api처리 한다면 부부 부분에 따라 세션 jstl el도 사용하고,일부는 js로 데이더 렌더링도 하게됩니다.ssr, csr은 개념에 대한 내용이지 이것이 꼭 개발 영역/ 프로젝트 소스의 분리라고 말하기에는 애매합니다.spa 즉, 싱글 페이지 어플리게이션으로 개발한다면 jsp등은 사용하지 않고 통상, 모든 페이지 html 을 프론드 레벨에서 개발 렌더링하고, 데이터는 비동기 ajax나 rest api호출이지만, ssr 기술을 적용 할 수 없는 것은 아닙니다.그리고 csr이라도 당연히 데이터 송수신은 http통신이기에 request 와 session은 존재하지만 jsp 등을 사용하지 않는 spa 라면 세션 el jstl 모델데이터 등에 적용하였던 데이터 또는 에러만 업무 규격에 맞는 데이테셋(json등)으로 response 하게 개발합니다.

코딩코더 · Answer

3) jsp 방식에서 el, jstl, 스크립랫 등을 사용했을때, 서버는 el, jstl, 모델 데이터를 session 및 request 를 조회하는 자바 코드로 변환하고 jsp의 html 코드를 스트링 빌더 코드로 변환해서 서블릿 클래스로 가지고 있다가페이지 요청 시에 변환된 서블릿 클래스를 실행하여 스트링 빌더로 가공되는 페이지의 모든 html 스트링을 response 로 반환하며, 이를 브라우저가 화면에 표시하게 됩니다.csr 방식으로 개발한다면 로그인 및 모든 데이터 처리는 비동기 통신 ajax 나 rest api를 호출하여 처리하며, 서버 컨트롤러는 request 데이터를 받아서 타당성 검토 및 db 조회 가공 등을 하고 결과 데이터 또는 에러만 업무 규격에 맞는 데이테셋(json등)으로 response 하게 됩니다.

내가만든쿠키 · Answer

RWB 코딩코더일단 답변 정말 감사드립니다.근데 제가 아직 프론트엔드 백엔드 분리해서 작업해본 적이 없고, 그냥 jsp 같은걸로 컨트롤러에서 받아온 모델로 페이지를 다 만들어서 뿌려주는 것 밖에 안해봤고, 프론트엔드 쪽을 아예 몰라서 이런 개념들이 아직 저한테는 너무 추상적이라 이해가 잘 안되긴 하네요;; 저는 처음엔 그냥 프론트엔드 백엔드 분리해서 만들면 CSR 인줄 알았는데 그게 또 아닌가 보네요.. 갈길이 멉니다ㅠㅠ

SSR, CSR 개념에 대한 질문입니다

5개의 답변

Q&A 목록