SPA과 CSR, SSR 에 관하여

SPA

SPA(Single Page Application) 입니다.

 

이름에서 쉽게 알 수 있듯, 한장의 페이지로 이루어진 사이트를 spa라고 합니다.

 

 

 

SPA 와 MPA

한 장 이라는 의미가 조금 모호할 수 있는데,

 

사이트를 쓰다보면 화면이 전환될 때 깜빡이는 경우가 있습니다.

 

이것은 html을 여러장 준비해두고, 페이지 변화(사용자 요청)가 일어나면

 

정적인으로 이미 구성된 요소(HTML, CSS, JavaScript)를 불러오는 방식으로 구성됐기 때문에

 

일어나는 일입니다.

 

이런 식으로 구성하는 것을 MPA(Multiple Page Application)이라고 합니다.

 

 

SPA 를 써야하는 이유

쓰잘데기 없이 왜 spa를 써야하는 궁금증이 들 수 있습니다.

 

spa를 쓰는 이유는 사용성 때문입니다.

 

가장 큰 이유는 mpa를 썼을때 깜빡이는 화면이 굉장히 킹받기 때문입니다..

 

 

SPA 와 MPA는 CSR, SSR이다?

spa를 공부하다보면 spa == csr, mpa == ssr 라는 오해를 자주 볼 수  있습니다.

 

 

csr, ssr이 뭔데

결국에 spa든 mpa든 페이지를 렌더링을 해야합니다.

렌더링 방식에 따라 csr과 ssr로 나눌 수 있습니다.

 

scr, ssr 왜 쓰는지

CSR(Client Side Rendering) 은 클라이언트에서 렌더링을 맡습니다.

SSR(Server Side Rendering) 은 서버에서 렌더링을 맡습니다.

 

말로만 들으면 잘 이해가 가지 않는데요.

 

렌더링을 맡는다는 말은 요청이 있을 때 페이지를 만드는 주체를 말합니다.

 

CSR

페이지를 방문하면 서버에서 js와 뼈대가 되는 html을 보내줍니다.

 

브라우저는 이것을 다운로드 받아서 동적 DOM을 생성합니다.

 

동적 dom을 생성하는 속도때문에 초기로딩이 느리지만, 이후에는 브라우저에서 js를 통해서 dom을 조작하기 때문에

 

상대적으로 첫번째 이후의 반응속도가 빠릅니다.

 

또 서버부담이 적습니다.

 

다만 크롤링에는 단점을 가집니다.(검색엔진 최적화에 불리함) -> 크롤링이 뭔데

 

SSR

페이지를 방문하면 서버에서 js와 필요한 데이터를 적용하고 css까지 적용된 최종본 html을 보내줍니다.

 

전달받은 페이지를 바로 띄우고, html과 다운받은 js를 연결합니다.

 

서버부담이 크지만, 크롤링에는 유리합니다.

 

또한 초기구동속도가 빠른편. 다만 js가 연결되기 전에는 html에 eventHandler등이 적용되기 전이라

 

잠깐의 텀이 생김. 이 기간동안은 사용자의 입력에 대해서 반응을 못함.

 

Time To View와 Time To Interact가 다른 상황이 발생하는 것.

 

장단점 과 어떻게 보완할 것인지(universal)

CSR의 단점 보완

pre-rendering으로 SEO 문제를 어느정도 해결 가능.

 

개인적으로 가장 좋은 해결방법은 CSR + SSR을 이용하는 방법이라고 생각합니다.

 

 

spa와 라우팅의 등장

 

실제로 어떻게 구현할까요?

https://velog.io/@nemo/Vanilla-JavaScript-SPA-1

[#1] Vanilla JavaScript로 SPA 구현하기 (No Frameworks)

이 블로그를 참조하면 실제 코드를 예시로 볼 수 있습니다.

 

spa를 하게 되면 페이지를 계속 변경하지 않고 하나의 page에서 계속해서 변경을 하기 때문에

 

hash나 history등을 이용해서 관리해주게 됩니다.