csr 2

클라이언트 사이드 렌더링(CSR) / 서버 사이드 렌더링(SSR) / 정적 사이트 생성(SSG) 비교 및 장단점 정리

Client-Side Rendering(CSR) 클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 사용자에게 보여주는 방식이다. CSR는 React, Vue, Angular 와 같은 single-page aplication (SPA) 에서 주로 사용되는 렌더링 방식인데, 즉 하나의 index.html 파일에 자바스크립트로 각 페이지를 렌더링한다. CSR 장점 초기에 웹사이트를 렌더링 후에 페이지간의 이동이 빠르다. 새로고침이나 화면 깜빡임 등과 같은 현상이 발생하지 않기 때문에 UX에 엄청난 이점을 준다. 서버가 클라이언트 뷰(View) 단에서 처리할 일을 신경쓰지 않아도 된다. CSR 단점 유저는 번들링이 완료된 JS 파일을 모두 다운로..

개발 상식 2023.08.12

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SCR)의 차이

먼저 클라이언트-서버 간 통신에서 HTML을 반환하는 웹 서버의 대략적인 흐름은 다음과 같다. 정적 페이지(HTML/CSS/JS로 이루어진 웹 문서) 반환 👉🏻 DB 연동 및 API 요청 필요성 대두 👉🏻 동적 페이지(정적 페이지 + 서버에서의 비지니스 로직이 가미된 문서) 반환 정적 웹페이지(static web page) : 정적페이지란 항상 같은 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청하였을 때, 서버 안에 이미 만들어져 있는 HTML 문서를 사용자에게 보여주는 경우) 동적 웹페이지(dynamic web page) : 동적페이지란 요청에 대해서 각각 다른 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청했을 때, 서버는 사용자에 맞는 HT..

개발 상식 2023.04.20