[ 목적 ]
각 랜더링 기법 특징을 숙지하고, 개발 시 주의해야할 점을 기록한다.
[ ssr ]
Server Side Rendering의 약자로 서버에서 랜더링 된 페이지를 클라이언트로 넘겨준다는 의미이다.
[ csr ]
Client side rendering의 약자이고, 페이지를 이동해도 서버에서 다시 html, css, js를 다시 받지 않는다는 의미이다.
[ 차이점 ]
서버에 요청하는 횟수가 가장 큰 차이이다. csr은 spa라고도 하며 Single page application의 약자이다. 하나의 페이지로 이루어진 웹 사이트이며, 처음 페이지에 들어갈때 모든 html, css, js를 넘겨받고 요청을 다시 보내지 않는다는 의미이다.
ssr은 mpa라고도 부르며 multiple page application의 약자이며 여러개의 페이지로 이루어진 웹 페이지를 의미한다. 페이지 이동 시 계속 서버에 페이지를 요청해야한다.
[ 장단점 ]
| SPA | MPA | |
| 로딩 방식 | 한번에 모든 페이지를 로드 | 해당 URL에 맞는 페이지만 로드 |
| 페이지 이동 | 페이지가 새로고침되지 않고 HTML만 바뀜 | 페이지가 새로고침됨 |
| 초기 로딩 | 큰 페이지를 로드해야하므로 상대적으로 느림 | SPA보다 빠름 |
| UX | 부드러움. | 화면 깜박임 발생 |
자 그럼 MPA를 개발하려면 어떻게 해야할까?
URL 이동 시 마다 페이지가 로딩된다고 위에서 설명하였다. 그럼 우리가 페이지에서 설정한 메모리가 다 날라간다는 의미이다.
AXIOS 설정, 로그인 상태 값, 각종 플래그, 타입 등을 설정한 정보가 다 날라간다는 의미이다. 매번 요청마다 AXIOS 설정을 다시 해주어야하는 번거로움과 코드 가독성이 떨어지기 마련이다.
그래서 서버에 전송할때 필요한 정보를 COOKIE에 넣어서 관리하므로 SSR은 COOKIE이 설정이 추가적으로 들어가게 된다.
SPA는 어떨까?
하나의 페이지에서 UI를 조작하므로 AXIOS설정이 날라가지 않는다. 서버에서 한번 받으면 로그인 정보를 AXIOS HEADER에 계속 넣어서 백단 서버로 요청을 보내게 된다.
이러한 장단점을 잘 파악하고 개발하도록 하자