블로그 필터의 데이터 중복 로딩과 공유 가능성 문제

데이터 중복 로딩 및 DOM 개수 문제?

현재 내가 운영중인 블로그는 Astro 프레임워크로 구현되었다. 대표적인 정적 생성(SSG) 최적화 프레임워크다.

내 블로그의 ‘홈화면’에는 블로그글 카드 UI와 칩 형태의 태그로 필터링 할 수 있다.

필터링을 위한 대표적인 기술로 ‘쿼리 스트링’이 있지만, 내가 블로그에서 필터링에 사용한 기술은 ‘HTML을 다 그려두고 브라우저에서 hidden 속성과 render() 함수로 노출 여부와 위치를 동적으로 재배치’하는 패턴을 사용하고 있다.

이 방식의 장점은 정적 빌드된 HTML을 그대로 사용하므로, 네트워크 요청 없이 즉시 필터링되어 속도가 매우 빠르다.
하지만 이는 치명적인 문제를 가져올 수 있다.

블로그 글이 100~200 정도 일반적인 규모라면 큰 문제 없이 작동하지만, 그 이상으로 글이 늘어나면 설계 수정이 필요하다.
현재 설계는 ‘하나의 글 데이터를 HTML 상에 [대표글]과 [카드]에 한 번씩 노출한다.’ 이게 무슨 말인지 설명하겠다.

위 사진을 보면, 주제에 따른 칩을 눌러 필터를 했을 때 메인 글(대표 글)이 바뀐다. 그에 따라 하단의 블로그글 카드 ui가 숨겨져(hidden) 있다가 노출되기 위해 data-post-tags=["js"] hidden 이런식으로 유동적으로 나타나야 하기 때문에 [대표글]과 [카드]에 한 번씩 노출해야 한다는 것이다.

하지만 이러면 중복 렌더링이 걸려서 글이 많아질수록 불필요한 정적 HTML 파일만 커지게 된다.

공유 가능성(Deep Linking) 문제?
- 사용자가 칩을 눌러서 글을 필터링한 상태에서 타인에게 url을 공유하거나 페이지를 새로고침하면, 필터가 풀린 초기 상태로 돌아간다. 이는 쿼리 스트링을 사용하지 않아서 발생하는 대표적인 정적 사이트의 UX 저하 요소다.

어떻게 해결할까?

위 문제들을 해결하기 위해 우선 HTML에 글을 중복으로 그려두면 안된다. Astro 빌드 시점에 전체 글의 메타데이터만 작은 json 배열로 추출해서 HTML의 <script> 태그 안에 심어둔다.
클라이언트에서는 그 json을 필터링한 뒤, 화면에 필요한 개수(대표글 1개, 카드 8개)만큼만 HTML 스트링을 생성해 슬롯에 넣는다(InnerHTML).

이렇게 구현된 구조에서 페이지가 켜질 때 url을 읽고, 그 값을 render() 함수에 그대로 넣어주면 된다.