SPA(Single Page Application)
먼저, SPA(Single Page Application)는 한개의 페이지로 이루어진 어플리케이션 이라는 의미입니다.
이것을 알기 전에 기존에 사용하던 방식을 조금 알아봐야합니다.
MPA(Multi Page Application)
우리가 일반적으로 웹사이트에 접속할때
서버에게 HTML파일에 대한 요청 > 서버는 요청받은 HTML파일의 전송
이러한 과정을 거칩니다.
이렇게 되면 서버는 기존에 이미 index.html과 다른 다양한 HTML파일들을 만들어두고 클라이언트에서 요청하면 각종 프로그래밍 언어를 통해 데이터베이스에서 데이터를 꺼내 HTML과 비슷한 ASP, JSP, PHP같은 파일들에 넣어준 후 이걸 HTML형태화 시켜서 전송합니다. (물론 데이터베이스가 필요없다면, 그냥 HTML만 보내긴 합니다.)
요약하자면, 기존의 웹은 브라우저는 단지 보여주기만 할 뿐, 요청한 웹 문서에 대한 처리는 전부 서버에서 담당한다...
그렇다면 정보가 많아지면 서버는 어떻게 되는 것일까요...??
과거의 웹에서는 전달하는 정보가 적었기에 괜찮았을지 모르지만 현재는 한 페이지에 수많은 정보가 들어있습니다.
그래서 서버는 페이지를 이동할때 마다 매번 새로운정보를 제공해야하며 유저 중심의 페이지가 만들어지기도 합니다. 그렇게 되면 서버쪽은 당연하게 과부하😵💫가 걸립니다.
그렇게 해서 등장한것이 바로 SPA(Single Page Application) 빠밤!
말 그대로, 한개의 페이지로 이루어진 어플리케이션
싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
출처 : 위키백과
즉, SPA는 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션입니다.
(하나의 html파일로만 동작함, 리액트 프로젝트 파일도 보면 다 html파일 하나로 작업)
먼저, Rendering이란?
렌더링은 요청받은 내용을 브라우저 화면에 표시하는 것
CSR(Client Side Rendering)
말 그대로 모든 작업을 Client side에서 수행
React / Vue / Angular 등등 요즘 핫한 Single Page Application이 해당됩니다. (Vue,Angular 프레임워크 / react는 프론트엔드 라이브러리입니다.)
클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다. HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행합니다. 점점 더 복잡해지는 웹페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 많아지고있습니다.
csr의 과정은 다음과 같습니다.
먼저 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보냅니다.
그럼 서버 는 화면에 표시하는 데 필요한 완전한 리소스의 응답합니다.
그런데 여기서 클라이언트 사이드 렌더링 방식이 서버사이드 렌더링 방식과 다른 점은 모든 js 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점입니다.
동작과정 : 서버에 요청 > HTML 다운로드 > JS 다운로드 > JS 실행 > DATA 서버로부터 받기 > Content 확인가능
CSR의 장점
- 클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능합니다.
- page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능합니다.
- lazy loading을 지원해줍니다.
lazy loading이란 ? 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술. 웹성능 최적화에 도움.(Ex. 스크롤 내려야만 해당 이미지 보이게 하는 것) - 서버사이드 렌더링이 따로 필요하지 않기 때문에 일관성있는 코드를 작성할 수 있습니다.
CSR의 단점
- Googlebot과 Searchconsole에 검색 노출이 되지 않습니다
(브라우저가 없기때문에, html만 가져와서 검색에는 뜨지 않음🙅🏻♀️) - 페이지를 읽고, 자바스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느립니다.
SSR(Server Side Rendering)
서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 html, js 파일 등을 다 다운로드해서 화면에 렌더링하는 방식입니다.
SSR의 장점
- 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있습니다.
- 검색엔진최적화(SEO) 적용이 용이합니다.
SSR의 단점
- 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌, 완전히 새페이지를 로딩하고 렌더해줍니다.(새로고침, 페이지 깜빡!)
- 전체를 로딩하다보니 CSR보다 느리고, bandwitdh를 많이 쓰고, 사용자 경험 좋지 않습니다.
(사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html요소들이 나오나 js파일이 다 다운로드 되지않아서 버튼이 클릭되지않는 등의 현상이 있을 수 있음)
