아겔로그

‼️ htmx 마법으로 링크성능 빠르게 + dark-mode 깜빡임 제거

지난번 dark-mode 방식을 새로 만든 이후로, 눈에 띄는 단점이었던 페이지이동시 flash현상을 없애고, 또한 매 페이지 이동을 엄청나게 가볍게 만들었다.

  1. 지난 포스팅: 🦹 darkmode.js… prefers-color-scheme

…위 포스팅에서 “Wrap Up”-표를 확인해 보면:

darkmode.js (기존) 새로운 방식
...생략...
😥-1 페이지 로딩시 flash 현상이 생긴다 😥-1
브라우저캐시에 없는 페이지를 로딩할 때에 발생할 수 있음.
(OS/브라우저 prefs와 local-storage에 저장된 color-mode이 서로 다른 경우)
...darkmode.js보단 가볍게 사라짐.
...생략...

…와 같이 된 부분을 다음과 같이 바꾼 것:

  1. 여전히 처음 브라우저에서 방문할 때엔 OS/웹브라우저에 의한 color-scheme preferences에 따라 깜빡임이 발생할 가능성은 있음.
  2. 하지만 블로그 안에서 링크를 이동할 경우엔 발생하지 않게 방식을 변경했다. 🐻
  3. 그리고 블로그에서 페이지링크를 여는 성능도 훨씬 쾌적해졌다. 🎐

방식 🛠️

  1. htmx의 hx-boost="true"-만 적용했다.

  2. 끝 🚩

    • 모든 <a href>-링크 이동은 이제 자동으로, 이동한 페이지전체를 다시 로딩하지 않고, ajax으로 로딩하여 필요부분만 다시 렌더링한다.

어떻게 더 빠른가?🧩

  1. hx-boost 이하에 적용된 링크들은 자동적으로, (htmx에 의해) 가로채진다.
  2. 가로챈 링크는 ajax request을 보내서 페이지의 내용을 얻음.
  3. 얻은 페이지의 내용은 페이지의 부분부분을 갱신한다. (“partial swap”)

  4. 웹브라우저의 URL을 History API을 이용하여 변경해준다.

    • 마치 링크를 이동했을 때처럼.
    • Back버튼도 제대로 동작할 수 있도록.

…이런 설명만 읽어서는… 오히려 htmx.js/ajax이 동작하는건데도 웹브라우저가 URL이동하는 것보다 어떻게 빠를까 싶은데:

  1. 동일하게 이미 로딩되어 있는 CSS, JS등을 다시 로딩하거나 초기화하지 않음.
  2. 그리고 그와 관련된 Assets (fonts, 등등등)도 그대로 두니까.

…결과적으로 훨씬 빠르고, 체감도 가볍게 렌더링된다.

(마치 SPA 자바스크립트 애플리케이션의 화면 전환과 같이)

실제로 Developer Inspector을 열어놓고 링크를 눌러보면, 네트웍 트래픽이 오가는 것을 볼 수 있거나(현재 페이지에서 추가적으로), 처음 열때의 페이지context을 그대로 유지한다는걸 관찰할 수 있다. (링크를 누를 때마다 새로운 page context으로 refresh되는 것이 아닌)

“graceful degradation”: js을 지원하지 않는 웹브라우저도 괜찮을까?

😸 그렇다.

어차피 ‘hx-boost’-이 영향을 주지 못한다면, 기존 링크들은 원래의 링크가 그랬듯이, 그냥 페이지이동을 하듯이 동작을 그대로 할테니까. ㅎㅎ

물론, flashing현상이나, 약간 더 무거운 페이지로딩이 뒤따르겠지만. ㅎㅎ