1.11

홍왕열·2022년 1월 11일

CSR SSR 빌드

SSR

서버에서 JSON파일로 가져와서 javascript를 이용하여 동적으로

Server Side Rendering의 줄임말

웹 페이지를 브라우저에서 렌더링하는 대신 서버에서 렌더링을 한다.

서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링하였기 때문에 Server Side Rendering이라고 한다.

만약 데이터베이스가 필요할 경우 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.

SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다.

웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합합니다.

웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

ex) 네이버, 뉴욕타임즈

CSR

Client Side Rendering을 의미한다.

SSR의 반대로 SSR이 서버 측에서 페이지를 렌더링한다면 CSR은 클라이언트에서 페이지를 렌더링한다.

브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신에 웹 페이지의 골격이 될 단일 페이지만 클라이언트에 보낸다.

일단 서버는 웹 페이지와 함께 JavaScript 파일을 같이 보낸다.

클라이언트가 웹 페이지와 JavaScript를 받으면 웹 페이지를 완전히 렌더링이 된 페이지로 바꾼다.

만약, 데이터베이스에 저장된 데이터가 필요한 경우에는 API를 사용하여 웹 페이지에 렌더링을 한다.

SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다.

사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.

웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.

ex) 각종 예약 사이트

SSR과 CSR의 다른점

페이지가 렌더링되는 위치.

SSR은 서버에서 페이지를 렌더링하고 CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다.
브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다.

첫 페이지 로딩시간.

CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다.
반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.
따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간.

첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하자.
CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다.
그래서 더 느리다.

정적 웹사이트

HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)

코드 자체라서 정적

보여지는 화면이 자체적으로 있는걸 배포하는 사이트라서 정적

동적 웹사이트

서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)

서버에 의해 코드가 생기는거라 동적

서버에 의해 보여지는 화면이 생성되는 거라서 동적

사이트 참고하기

https://proglish.tistory.com/216

빌드

고도화된 클라이언트 웹 앱은 수많은 모듈로 이뤄져 있다.
이처럼 수많은 모듈을 하나로 묶어주는 작업을 번들링이라고 하며, 이 과정에서 JSX 파일과 같이 브라우저에서 자체적으로 해석이 불가능한 다양한 보조 기술들을 브라우저가 해석할 수 있도록 만들어주는 작업이 수반되었다.

이러한 과정을 소프트웨어 빌드라고 부른다.