Search
Duplicate
📗

CSR, SSR

간단소개
팔만코딩경 컨트리뷰터
ContributorNotionAccount
주제 / 분류
Web
Scrap
태그
9 more properties

CSR (Client Side Rendering)

웹의 단점인 페이지 새로고침을 최소화 하고, 더 빠른 응답성을 위해서 등장하게 되었습니다.
Browser에서 Sever에 요청을 보내면, Server는 특별한 분석 없이 모두에게 똑같이 빈 HTML을 줍니다.
Browser는 서버에게 받은 HTML 내부의 Javascript 코드를 실행하여 해당 Javascript가 상황에 맞게 해당 HTML을 그려주는 구조입니다.

CSR의 한계

요청을 보내면 빈 값을 보내주기 때문에 (문서의 내용을 알 수 없음) SEO(검색엔진 최적화)가 필요하게 되었고, 추가적으로 초기 랜더링 시간 단축의 목적으로 결국 서버에서 HTML문서를 만들어야 할 필요가 생기게 되었습니다.

SSR (Server Side Rendering 또는 Universal Rendering)

Browser에서 Server에 요청을 보내면, React(예를 들어)로 만든 앱이 Node.js 환경에서 구동해 HTML String을 생성하게 됩니다.
서버는 Browser에게 HTML String과 기존에 CSR에서 필요했던 JS파일을 응답으로 줍니다.
Browser는 해당 JS코드를 실행시킵니다.
Hydration
Hydration은 React.js, Vue.js 등의 Client-side Framework가 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 의미합니다.
Isomorphic Javascript
SSR 과정 중 한 JavaScript 코드가 Node.js와 Browser 환경에서 모두에게 동작하게 되는데, 이렇게 두 환경에서 모두에게 동작할 수 있는 JavaScript 코드를 Isomorphic Javascript라고 합니다.
continue