PJAX 에 대한 간단 고찰 (feat. 트위치)

2019-01-02

이 기능은 push state 로 구현한 것이다.

push state 를 사용하면 뒤로가기를 했을 때, 스크립트가 실행된다.

간단한 눈속임으로 마치 뒤로가기를 했지만, 리다이렉트가 안되는 것이다.

pushState 를 업데이트하고나서 

ex:) history.pushState({page: 1}, 'PushState', '?page=first');

인자는 저장할 데이터(배열형식), 페이지 제목, url

뒤로가기를 했을 때 이벤트 핸들러인 window.onpopstate 가 실행되며, 

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

이런식으로 호출이 가능하다.

이후 아래는 탐구 과정을 써봤습니다. (Push State 모르고 조사하면서 씀)

---

여느때와 다름없이 트위치에서 방송을 보다가

신기하다고 생각한 기능이라고만 생각했는데

오늘은 왠일인지 탐구하고 싶어서 찾게 되었다.

뒤로가기를 하거나 앞으로 가기를 하는데 전체적인 페이지 새로 고침이 일어나지 않고 일부 페이지만 갱신이 된다.

처음엔 단순하게 페이지를 embeded나 iframe 으로 나눴나? 하는 생각을 했는데

알고보니 SPA(Single Page Application) 중 하나로 Ember.js 로 구현을 한거라고 한다.

참고 : https://stackoverflow.com/questions/41286748/how-does-twitch-keep-a-persistent-video-window-over-several-pages

네이버에도 비슷한 기능이 있는데 그건 잘 모르겠다.

예전에 한번 찾아본 바로는 CSS나 Javascript로 꼼수 비슷하게 만들 수 있는걸로 아는데(SPA 아님) 네이버는 이걸로 했을거라 추측해본다.

위와 같은 기능을 PJAX 라고 하며 Push State + AJAX 라고 하는데

이걸 내가 만드는 사이트에 적용할 곳은 없어서 구현에 관해서는 조사만 이루어질 것 같지만

개발하는 입장에선 이게 참 신기하다.

나온지 꽤 된 기술 같은데 많이 쓰이는 곳이 없어서 그런지 이번에 처음 알게되었다..

필요한 곳에 구현을 한다면 상당한 트래픽을 줄여줄 것이고, 동영상도 트위치 처럼 끊기지 않고 볼 수 있어 좋을 것 같다.

----------------------------------------------

추가로 검색해본 결과

굳이  js 프레임워크를 쓰지 않아도 pushstate 와  ajax(xmlhttprequest) 를 이용해서 할 수 있는것으로 알았다.

pushstate라는 함수는 history 객체에 있는 것으로

국내엔 이 사이트에 pushstate 예제가 있다. https://slipp.net/wiki/display/SLS/pushstate

여기 안에다 ajax를 넣으면 끝인거 같긴 한데 .. 

https://pjax.herokuapp.com/ 이렇게 구현하려면 별도의 플러그인을 써야할지.. 역시 해보지않으면 모를듯.

추가 PushState 관련 페이지 : https://developer.mozilla.org/ko/docs/Web/API/History_API

모질라는 기술 문서가 매우 잘 되어있다.

여담으로 파이어폭스 브라우저를 예전엔 자주 썼지만 크롬에 더 다양한 플러그인이 있어 크롬을 쓰는 편..