SSR과 CSR에 대해 질문이 있습니다.

Question

SSR과 CSR방식에 대해 2가지 궁금한 점이 있어 질문을 남깁니다:) 1. SSR의 동작방식렌더링이란 &#96;브라우저가 HTML을 이해할 수 있도록 파싱한 뒤에 UI에 그려주는 작업&#96;이라고 알고있습니다. 이 정의에 따라 브라우저에서 렌더링을 한 뒤에 사용자가 볼 수 있는 것으로 이해했습니다. 그런데 SSR은 서버에서 렌더링을 한다고해서.. 동작을 이해하기가 어렵네요. SSR은 서버에서 HTML코드를 내려줄 때 브라우저가 이해할 수 있도록 파싱(렌더링)한 뒤에 브라우저에게 해당 데이터를 넘겨주는 건가요 아니면 HTML만 내려주고 렌더링은 브라우저에서 그대로 하는것인가요? 2. CSRSPA(싱글 페이지 어플리케이션)에서는 CSR방식을 주로 사용한다고 알고있습니다. SPA를 실현하기 위해서는 html과 다양한 asset(css, js, 이미지 등)이 묶인 번들 파일을 통해 최초의 html을 하나만 두고 화면을 그려주는 것으로 알고 있습니다. 여기서 궁금한점이 html이 하나라면, SPA 방식에서 다양한 브라우저 화면을 동적으로 그려주는것은 javascript의 역할인가요? 각 페이지마다 html이 없이 어떻게 SPA가 CSR을 실현하는지 궁금하네요.

karami · Answer

1. 고대의 웹은 정적페이지로 다 했다고 합니다.그래서 당시에 나온 개념이 웹서버이고요. 예를들어 화면이 10개이고 10개의 화면이 대동소이한데 같은 위치의 글자 몇개씩만 다르다고 해도 10개의 HTML파일이 필요합니다. 너무 비효율적이죠.그래서 HTML에 변수를 만들고, HTML이 작성되어야 하는 시점에 서버에서 HTML에 들어있는 변수에 데이터를 채워넣고 완성된 HTML을 만들어 줍니다. 이러면 화면이 10개라도 같은 위치의 데이터만 변경된다면 변수를 가지고있는 한개의 HTML로 10개의 페이지를 커버할 수 있습니다. 이를 서버사이드 렌더링, 즉 SSR이라고 하구요. 클라이언트(웹 브라우저)에서 서버로 HTML을 달라는 요청(HTTP Request)을 보내면 서버는 이 요청을 받고 HTML에 데이터를 채우고, 완성된 HTML을 응답(HTTP Response) body에 담아서 보내줍니다. 웹 브라우저는 이러한 응답을 받으면 body에서 HTML을 가져와 렌더링을 합니다.이와 관련해서는 DOM에 관해 공부하시면 될것같구요. 2. 전부 자바스크립트로 처리합니다.이 경우 서버에서는 HTML이 아닌 XML, JSON과 같은 데이터를 내려줍니다.현재는 JSON의 사용이 압도적으로 많습니다.

SolidDevv · Answer

&#64;shirohoo Ssr의 동작방식과 서버에서 렌더링한다는 의미가 이런것이었군요..! 설명도 너무 명확하시고 무엇보다 답변달아주셔서 감사합니다! 많이 배웠습니다 답글을 보실지 모르겠지만, 질문하나만 더 드리면 Jsp 와 같은 파일의 렌더방식이 ssr과 비슷한걸까요?

SSR과 CSR에 대해 질문이 있습니다.

2개의 답변

Q&A 목록