avatar
Ganymedian

NextFast Project

a month ago
·
4 min read

Wes Boss 선생이 한 달 쯤 전에 작은 돌 하나를 던졌습니다.

State of JS 설문에서 영향력있는 인물로 상위권에서 늘 빠지지 않는 선생님이죠.

그가 한 레거시 웹사이트를 소개하는 영상을 유튜브에 올렸습니다.

.

.

How is this website so fast?

https://www.youtube.com/watch?v=-Ln-8QM8KhQ&ab_channel=WesBos

어느 오래된 .asp 기반의 하드웨어 부품 이커머스 사이트의 말도 안되는 응답속도를 분석하고 소개하는 영상이었는데요.

https://www.mcmaster.com/

지금도 멀쩡히 운영되고 있는 이커머스 웹사이트입니다.

링크를 붙이기가 사이트 운영자에게 조금 죄송한 생각이 들지만, 정말로 말도 안되는 응답속도를 보여주고 있습니다.

Wes Boss 선생의 소개가 알려진 다음부터, 어느날 갑자기 개발자들의 성지가 되어버린 곳이랄까요.. 암튼, 커스토머는 아닌 개발자들이 반갑지 않은 트래픽을 발생시키고 있는 곳입니다. (지금은 일부 pre-fetch 기능을 꺼버린 것 같습니다. 개발자들의 의도치 않은 ddos 이펙트? 때문인 것 같아요.)

McMaster 의 놀라운 응답속도의 비밀은,

Aggressive Pre-Rendering

Aggressive Pre-Fetch

로 Wes Boss 선생은 분석하고 있습니다.

mouseOver 이벤트에, 타겟 페이지의 프리렌더링 된 Dom 을 먼저 prefetch 해오는 것이지요.

비록 20년 묵은 .asp 기술로 만들어진 레거시 웹이지만, 사용자 경험 UX 측면에서는 지금보다 앞선 접근이라고 소개할 수 있겠습니다.

.

그런데, 이 재미난 떡밥을 그냥 놔둘 개발자들이 아니죠.

놀이감을 발견한 몇몇 개발자들이 McMaster.com 의 기본 컨셉을 승계한 NextJS 기반의 오픈소스 프로젝트를 만들었습니다.

두둥!!

.

.

NextFaster Project

오픈소스 프로젝트 NextFaster

https://github.com/ethanniser/NextFaster

버슬에 라이브 데모도 올려져 있습니다.

https://next-faster.vercel.app/

엄청난 반응속도에 헛웃음만 나오게 되는데요..ㅋㅋㅋㅋㅋ

반응속도가 정말로 웃깁니다.ㅋㅋㅋㅋ

lighthouse 의 평점은 모든 항목에서 100점이군요.ㅋㅋㅋㅋ

.

NextFaster 프로젝트에서 UX 를 향상시킨 비밀은 아래 네가지로 소개하고 있습니다.

  • Partial Pre-Rendering

  • Aggressive Pre-Fetching

  • Aggressive Caching

  • Avoid database joins

물론, 이 놀라운 반응속도를 제공하기 위해서는 서버 인프라가 더 많은 땀을 흘리는 댓가를 지불해야 하겠죠.

그러나, 매우 의미있는, 재미있는 오픈소스 프로젝트인 것 같습니다.

React - NextJS 진영의 한 사람으로써, 자부심과 긍지가 느껴지는 경험이었던 것 같습니다.

엣헴.







....