CSR Client Side Renderin
✅
서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것
💡CSR의 동작 과정 → 초기 화면수행
사용자가 홈페이지 접속하면 (최초 접속) - 클라이언트는 이걸 확인하고 서버로 → 요청해준다
서버는 빈페이지 (Html cssjs) 를 클라이언트에게 전달한다
전달 받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을→ 사용자에게 보여준다.
사용자가 다음 액션을 수행할 경우 클라이언트 내에서 페이지를 요청하고 수행한다
💡페이지 이동 / 동작이 발생한 경우
브라우저🖥에서 클라이언트로 요청한다.
클라이언트에서 해당정보를 처리하고 브라우저🖥로 전달한다.
(페이지를 이동한 경우 클라이언트 내에서 처리함)
브라우저🖥에서 이를 처리하고 처리된 사항을 그려준다.
SSR이란? Sever Side Rendering( 서버사이드렌더링 )
✅ 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식
서버로부터 완전하게 만들어진 html 파일을 받아와서 페이지 전체를 렌더링을 하는 방식이다.
리액트는 대표적으로 CSR(Client Sever Rendering)이다. 클라이언트 서버 사이드 렌더링
SSR은 페이지 이동시 새로운 페이지를 요청하기 때문에 페이지 이동시 깜빡임이 존재하고 ,
템플릿 중복해 로딩한다면 이는 서버에 부담을 줌으로 성능상 좋지 않는 단점이 있다.
→ SSR 동작 과정 초기화면수행
👩🏻 사용자가 브라우저에서 요청한다 [최초 홈페이지 접속]✔️
클라이언트에서는 이를 확인 Check 하고 서버 로 요청한다.✔️
서버에서 데이터를 포함한 미리 구성된 Html css 파일을 클라이언트에게 전달한다.✔️
전달 받은 클라이언트에서 스크립트가 수행되어 최종적인 화면을 브라우저에 그려 사용자에게 보여준👀✔️
SSR 동작과정 - 페이지 이동 → 동작이 발생한 경우는?
👩🏻 브라우저 🖥 에서 클라이언트로 요청한다✔️
요청한 정보를 다시 서버로 재 요청한다 (페이지를 이동할 경우는 서버로 요청해야한다)✔️
처리가 완료후 클라이언트에 응답한다.✔️
클라이언트에서 브라우저로 처리된 사항을 그려준다.✔️