서버사이드 렌더링(Server Side Rendering)
렌더링이란 데이터를 요청을 해서 서버로 부터 받은 내용을 브라우저 화면에 표시하는 것을 말한다.
서버 사이드 렌더링(SSR)이란 서버에서 필요한 데이터를 모두 가져와서 Html파일을 만들고 Html파일과 함께 동적으로 제어할수 있는 코드(자바스크립트 코드)를 브라우저에게 전달하는 것을 말한다. 서버는 요청받은 HTML파일을 전송하고 브라우저는 받은 HTML을 보여주는 하는 방식으로 브라우저는 페이지를 이동할 때마다 서버에게 새로운 페이지를 요청한다. 이렇게 하면 페이지 요청마다 페이지 새로고침이 일어난다.
장점
- 모든 컨텐츠가 html에 담겨 있기 때문에 검색엔진 최적화(SEO) 가능
- 성능 개선, 첫 렌더링된 Html을 전달하기 때문에 초기 로딩 속도가 빠르다.
단점
- 좋지않은 User Experience. 요청이 일어날때마다 페이지가 리로드 되는 Blinking issue, 사용자가 클릭하게되면 전체적인 웹사이트를 다시 서버에서 받아와야 함은 static sites과 같다.
- 서버에 과부하가 걸리기 쉽다
- 자바스크립트 파일을 받아와야 interection이 가능하다. 사용자가 브라우저를 볼 수 있는 시간과 실제로 상호작용 할 수 있는 시간의 공백기가 꽤 길다.
JWT
JWT란 JSON Web Token의 약자로 클라이언트와 서버가 JSON 파일 안에 필요한 데이터를 주고 Token형태로 Authentication 정보를 주고 받을 수 있다.
JWT는 header, payload, signature로 구성되어 있다.
Header: alg(사용하는 알고리즘), typ(타입)으로 구성
타입 'JWT'는 고정값이고 알고리즘은 signature를 만드는데 사용 될 알고리즘이 지정된다. HS256 등 여러 암호화 방식 중 하나를 지정할 수 있다. JWT를 어떻게 검증하는가에 대한 내용을 담고 있다.
Payload: 주고받을 수 있는 데이터 -> 인코딩, 보안처리 돼있음
signature: 인코딩하기 위해 사용하는 서버의 비밀키(secret)과 함께 인코딩. header와 payload를 합친 문자열을 서명한 값이다. 서명은 헤더의 alg에 정의된 알고리즘과 비밀 키를 이용해 성성하고 Base64 URL-Safe로 인코딩한다.
1) 사용자가 로그인을 하고 유효한 사용자라면 사용자의 id와 원하는 정보를 묶어 JWT를 만듬
2) 만들어진 JWT를 사용자게에 보내줌
3) Client에서 요청할때 header에 JWT를 포함해서 서버에 전달함.
4) Server에서는 Client요청에 받은 JWT를 유효한지, 만료되었는지, 사용자의 정보가 정확한지 유효성을 검사함.
5) 요청에 맞는 데이터를 Client에게 보내줌.
장점
- 서버측 부하를 낮출 수 있고 능률적인 접근 권한 관리를 할 수 있다.
- 서버를 확장하거나 마이크로 서버나 분산형 시스템으로 만들어도 서로 서버간의 네트워크 요청을 통해서 사용자의 검증을 하지않아도 JWT를 만들고 해독할 수 있는 secret 키만 가지고 있으면됨
단점
- 서버에는 토큰을 보낸 사용자에 대한 정보가 없기 때문에 토큰이 탈취당한 경우 무효화 할 방법이 없다.
- Client와 Server간에 JWT자체를 주고 받기 때문에 보안에 주의 해야함
