react-router을 복습하면서 외부문서를 찾아보는데, 문득 CSR과 SSR란 단어가 등장했다. 많이 들어봤는데 정확한 개념을 모르기도 하고 면접의 CS지식으로 중요할 것 같아서 공부하는 시간을 가져봤다.
1. SSR
Server Side Rendering의 약자이다. 즉, 서버쪽에서 렌저링 준비를 끝마친 상태로 클라이언트(브라우저)에 전달하는 방식이다.
다음과 같은 프로세스를 거친다.
user가 Website에 요청을 보냄 -> Server가 'Ready to Render' 즉, 즉시 렌더링 가능한 html 파일을 만든다.
-> 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. -> 클라이언트가 자바스크립트를 다운받는다. -> 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다. -> 브라우저가 Javascript 프레임워크를 실행한다. -> JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
2. CSR
Client Side Rendering의 약자. 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
User가 Website 요청을 보냄. -> CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. -> 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.(이때 유저들은 placeholder를 보게된다. ) -> 서버가 API로부터의 요청에 응답한다. -> API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.😡)
파라미터와 쿼리
페이지 주소를 정의할 때, 유동적인 값을 전달해야 할 때도 있다. 이러한 유동적인 값을 처리하는 방식으로는 파라미터와 쿼리가 있다.
파라미터: /profiles/velopert
쿼리: /about?details=true
이것을 사용하는것에 대하여 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용됩니다.
'내일배움캠프[4기_Reac트랙] > TIL' 카테고리의 다른 글
| 내일배움캠프 React트랙 44일차 회고 (2022.12.30) (0) | 2022.12.30 |
|---|---|
| 내일배움캠프 React트랙 43일차 회고 (2022.12.29) (0) | 2022.12.29 |
| 내일배움캠프 React트랙 40일차 회고 (2022.12.26) (0) | 2022.12.27 |
| 내일배움캠프 React트랙 38~39일차 회고 (2022.12.23) (0) | 2022.12.26 |
| 내일배움캠프 React트랙 37일차 회고 (2022.12.21) (0) | 2022.12.22 |
