1. SSR, CSR의 상세동작 순서
1-1. SSR의 동작 순서
Server Side Rendering의 약자.
서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
1. User가 Website 요청을 보냄.
2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다.(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
! 이 즉시 렌더링 가능한 html파일에는(html,css,js)가 들어간다. 클라이언트가 읽는 JS파일과 html에서 렌더링 하는 JS코드의 정확한 기준점은 모르겠다. 다만, html은 <script>태그 안에 들어가는 js만 해당하지 않을까 생각중이다. 보통 document.createElement와 같은 돔을 직접 조종하는 코드도 클라이언트가 JS파일을 읽을 때 적용된다. 이것도 <sciprt>태그 안에 있으면 html에 랜더가 되지 않을까?라고 생각중이다.
3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
4. 클라이언트가 자바스크립트를 다운받는다.
5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는
무언가를 보고 있을 수 있다.
1-2. CSR의 동작 순서
Client Side Rendering의 약자.
SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
1. User가 Website 요청을 보냄.
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
CDN(Content Delivery Network): 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
ex) aws의 cloudflare
3. 클라이언트는 HTML과 JS를 다운로드 받는다.(이때 SSR과 달리 유저는 아무것도 볼 수 없다.)
4. 생략
5. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.
(이때 유저들은 placeholder를 보게된다.)
6. 서버가 API로부터의 요청에 응답한다.
7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼
수 있는게 없다.
2. WAS의문점 (Node.js)
의문점
SSR에서
Node.js는(웹서버 + WAS[웹서버+웹컨테이너]로 이루어져있다.)
Node.js는 클라이언트가 요청한 정적인 콘텐츠(html,css,javaScript)를 HTTP 프로토콜을 통하여 제공해주는 것 말고도 동적으로 DB와 연결하여 여러 데이터를 활용해 표현된 페이지를 해석한다고 한다.
브라우저에서는 나머지 JS파일을 읽어 상호작용을 활성해 주는걸로 보인다.
그런데 내가 window.localStorage객체를 사용해서 토큰을 저장하고 그 토큰을 유저의 데이터를 가져올 때 헤더에 담아서 보낸다면 node.js의 경우 window전역 객체가 없기 때문에
토큰에 대한 정보가 없으니 데이터를 가져오지 못할텐데.
이런 경우에는 WAS에서 데이터를 활용해 페이지를 해석하지않고 브라우저로 넘겨서 브라우저가 처리하는 것인가?
해답
첫번째, 웹스토리지는(로컬스토리지, 세션스토리지)는
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
즉, SSR이 아닌 CSR에서 사용하는 저장소이다.
If you mean html 5 localStorage, there's no such a thing since node.js is a server-side technology. Html 5 localStorage is a client side feature supported
SSR인 경우에도 node.js에서 npm을 통해 모듈을 설치해서(node-localstroge) 사용할 수 있지만 이 경우에는 Client의 localStorage에 접근하는 것이 아니라 Server-side의 localStorage를 사용하는 것이다.
두번째, Node.js는 window객체가 없는데 settimeout같은 window 전역객체의 메소드들은 어떻게 사용하는 걸까?
fetch(메서드), localStorage(프로퍼티)같은 window객체에 속해있는 것은 node.js에 존재하지 않아서 npm을 통해 모듈을 다운로드 받아야 비슷한 기능을 하는 것을 사용할 수 있다.
settimeout과 같은 window객체에 속한 메서드는 환경에서 내부적인 스케쥴러를 통해 제공하고 있다.
https://m.blog.naver.com/dktmrorl/221936872055
위의 함수들은 자바스크립트 스팩의 일부가 아닙니다. 하지만 대부분의 환경은 내부적인 스케줄러를 지니고 있습니다. 그리고 이러한 함수들을 제공합니다(node.js 및 모든 브라우저 제공).
간단하게 말하자면,
window객체가 없기에 제공하지 못하는 메서드와 프로퍼티가 있지만 Node.js 내부적으로 제공하는 메서드와 프로퍼티도 있다고 생각하면 된다.
reference:
https://oneshottenkill.tistory.com/316
https://stackoverflow.com/questions/10358100/how-to-access-localstorage-in-node-js/10358172
https://stackoverflow.com/questions/38495168/how-to-use-window-sessionstorage-in-node-js