모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)!
고려해야할 점들이 있다.
SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다.
렌더링 방식
SPA는 클라이언트사이드렌더링
방식 이다.
기본적으로 페이지 로드가 없고, 모든페이지는 단순히 HTML5 History
에 의해 렌더링될뿐! 그래서 언제 새로운 데이터를 불러와야할지 스스로 정해서 구현
해야한다.
전통적인 웹 방식(SSR)은 이 SPA 방식에 비해 성능문제 이슈가 있었다.
전통적인 웹 대부분은 서버사이드렌더링
방식 이었다. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었다. 이런 방식을 사용하다가 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었다.
요즘은 웹에서 제공되는 정보가 정말 많기 때문에 전통적인 방식은 성능문제에 이슈를 낳았다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문이다. 예를들어 현재 주소에서 동일한 주소를 가리키는(갖고있는) 버튼을 눌렀을때, 설정페이지에서 필요한 데이터를 다시 가져올 수 없다.
이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법일 수 있다. 렌더링을 서버쪽에서 하는 것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.
반면 클라이언트 사이드 렌더링
은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.
뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공했다.
SPA는 한 종류의 화면만 존재하는 것이 아니다!
화면에 따라 다른 주소를 가진다. 주소가 있어야 사용자들이 북마크도 가능하고, 서비스에 구글을 통해 유입될 수 있기 때문이다.(SEO).
주소에 따라 다른 뷰를 렌더링하는 것을 라우팅
이라고 한다. React자체에는 이 기능이 내장되어있지않기 때문에 라이브러리 react-router를 사용해서 설정해야한다.
새로고침
이 발생한다.각 페이지 마다 고유 URL이 존재하므로 history관리 및 SEO 대응에 문제가 없다.
=> BUT 중복된 리소스를 요청마다 수신해야하며, 전체페이지를 다시 렌더링 하는 과정에서 새로고침이 발생하면서 사용성이 좋지 않다.
전체적인 트래픽 감소, 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험
=> BUT Link처리에 대한 고민이 필요하다.
프로젝트에 따라 정말 필요한지 고려해보고 도입하자!
개인적으로 공부한 내용이므로 틀린부분이 있다면 많은 지적바랍니다!
옛날부터 정말 궁금했던 것인데, 제가 프론트엔드를 안하다 보니 고민 해결을 못한 것이.. SSR이 정말 SEO에 유의미할 정도로 기여를 하나요? 어느 검색 엔진이느냐에 따라 다르긴 하겠지만 클릭률(CTR), 연관 키워드, 백링크(다른 사이트에서 우리 사이트를 가르키는 링크) 갯수, 페이스북에 관련된 것들(공유, 트래픽, 코멘트 등)이 큰 기여를 하는 것으로 알고 있거든요. 검색엔진 크롤러한테만 따로 SSR 시켜주는 기법도 사용되곤 하니 DOM의 컨텐츠가 뭔가를 하긴 할텐데, 그 뭔가가 무엇일지 모르겠어서요. ㅎㅎ