🕵️ 서버 사이드 렌더링

1️⃣ 싱글 페이지 애플리케이션의 세상

✏️ 싱글 페이지 애플리케이션(Single Page Application: SPA)이란?

자바스크립트를 활용해 하나의 페이지에서만 렌더링을 수행
렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식
최초에 첫 페이지에서 데이터를 모두 불러온 이후에는, 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄짐

즉, 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고 함

👀 SPA로 만들어진 사이트의 HTML 코드를 보면 `<body />` 내부에 아무런 내용이 없음!

사이트 렌더링에 필요한 <body /> 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 때문

페이지 전환 시에 새로운 HTML 페이지를 요청하는 거 ❌
자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP 요청 등으로 가져온 다음, 그 결과를 바탕으로 <body /> 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환됨
즉, 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이루어짐

<br />

✏️ SPA의 장단점

👍🏻 장점

한 번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어지기 때문에 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있음

👎🏻 단점

최초에 로딩해야 할 자바스크립트 리소스가 커짐

<br />

✏️ 전통적인 방식의 애플리케이션과 SPA의 작동 비교