나를 망치러 온 나의 구원자 bf캐쉬

[yunseorim1116]

"뭐...bf캐쉬가 있으니까 알아서 해주지 않을까요............ 긁젹"

저는 벨로그를 굉장히 많이 애용하는데요. 가끔 벨로그나 원티드같은 플랫폼을 사용하다 뒤로가기를 하면 원하던 위치로 가지 않는 현상이 떠올랐습니다.

게시글을 보고 있는 도중에 상세보기를 클릭했습니다. 하지만 너무 활발한 커뮤니티인 탓에 게시글 업데이트 속도가 매우 빠릅니다. 이로 인해 내가 기억하고 있던 게시글 위치에 너무 많은 업데이트가 발생했습니다. 결과적으로, 브라우저 캐시는 내가 기억한 게시글의 위치를 보존하고 있지만, 실제 위치가 정확하지 않게 되었습니다.....

뭐... 영상으로 보면 이런 상황입니다...

2024-10-13.6.57.19.mov

*구현보다 영상 찍는데 시간이 더 오래걸렸습니다....눙물

해결은 어떻게 하냐고요....? ...... 그래서 이제 해결하러 가보렵니다. 일단 실험은 끝났으니 해결책을 찾아 블로그 글을 써볼 예정입니다.

총총총

[ 과정 ]

• 나는 실무자다 빙의하기
• Express 서버 만들기
• cors 처리
• 데이터 날짜 최신순 정렬
• 이미지 정적 서버 처리
• 무한스크롤 구현

키워드 : scrollRestoration , bf캐쉬

테스트 환경 구축을 위한 풀스택 무한스크롤 구현

default.mov

[yunseorim1116]

사실 bf 캐쉬때문이 아닌 이유 : fetch가 새로 됐기 때문.

[yunseorim1116]

BFCache

정의: The bfcache is a snapshot of the entire page in memory(including the JavaScript heap)

• 사용자가 브라우저 내에서 뒤로가기/앞으로가기 했을 경우 이전 페이지를 전체 캐싱해서 in memory로(자바스크립트 heap 영역까지) 가지고 있는 것을 말한다.
• 전체 페이지를 in memory에 저장하므로 뒤로가기/앞으로가기 했을때 복구가 훨씬 빠르고, 그러다보니 사용자 경험을 굉장히 향상시킬 수 있다.
  마주할 수 있는 문제상황을 예시로 들면 아래와 같다.

문제 상황1. (뒤로가기/앞으로가기시) BFCache로 인해 로그를 전송하는 코드가 호출 되지 않음.
문제 상황2. (뒤로가기/앞으로가기시) 페이지 초기화를 위한 코드가 불리지 않음. 등등

[yunseorim1116]

웹서버가 Cache-control: no-store 헤더를 전송하면 브라우저는 BFCache를 건너뛰도록 지시

[yunseorim1116]

Back and forward cache | Articles | web.dev

[yunseorim1116]

해결 방법

정석인지는 모르겠다만 두가지 방법을 생각해보았다...

1. ref와 스크롤 위치 저장

사용자가 특정 게시글을 보고 있을 때 그 시점의 DOM 요소와 스크롤 위치를 전역상태관리에 저장한다.
뒤로 가기를 했을 때 저장된 정보를 사용해 원래 보고 있던 위치로 돌아간다.
scroll !== prevscroll로 스크롤 변화를 비교해 게시글 목록이 변경되었는지 확인한다.

2. Intersection Observer 설정

마지막으로 본 dom 의 ref를 저장하고 페이지를 다시 로드하거나 돌아왔을때 저장된 요소로 스크롤을 이동시킨다.

[lukasjhan]

무한스크롤 방식으로 구현된 갤러리같은 뷰는 뒤로가기를 처리하기 굉장히 복잡하더라고요. 스크롤 위치도 말씀하신것처럼 복구하기 어려웠고요.

이런방식으로 구현하면 어떨까요? 무한스크롤 갤러리가 있다고하면 요소를 눌러서 이동하는 행위를 사실. 거대한 모달창처럼 dom을 만들어서 갤러리위에서 새 페이지인양 처리하는거죠. 그리고 뒤로가기 누르면 위에 떠있는 dom element를 삭제해서 다시 갤러리가 보이게 하고요.

[lukasjhan]

주로 스크롤 위치 (유저가 보고 있던 element)를 저장해두었다 복원하는 방식을 사용하는데요. 크게 2가지 어려운점이 있더라구요.

1. 뒤로가기와 동시에 보던 위치로 이동하기 위한 스크롤 발생 - 유저 입장에서 즉각적으로 interaction하지 못함.
2. 보던 위치로 이동하기 위한 스크롤과 observer를 설정하여 무한 스크롤을 구현한 코드가 충돌함

• 무한 스크롤을 구현하기 위해 스크롤에 맞춰 컨텐츠를 불러오도록 구현한 로직 (스크롤 -> 컨텐츠)
• 컨텐츠가 있을때 특정 조건에서(예를 들어 뒤로가기) 특정 컨텐츠로 스크롤 하도록 구현한 로직 (컨텐츠 -> 스크롤)
  위 두 로직이 서로 반대방향으로 동작합니다. 그래서 정교하게 로직을 구현하기 어렵더라구요.

[lukasjhan]

그래서 무한 스크롤 로직(컴포넌트)와 디테일을 보는 컴포넌트를 독립적으로 유지하고. 그냥 스크롤을 dom에서 유지할 수 있으면 좋을 것 같다는 생각이 들었어요. 그래서 무한 스크롤 컴포넌트를 dom에서 유지한 채로 그 위에 컨텐츠를 보여주자. 이렇게 생각한거죠.

[lukasjhan]

장점이 한 가지 더 있는데요. 제가 detail(모달) 페이지의 링크를 공유한다고 했을 때,
공유 받는 사람이 링크를 열면 즉시 detail 정보를 서버로 부터 fetch해서 먼저 모달로 보여주고, 안 보이는 dom에서 스크롤 이동로직을 처리하면 사용자가 스크롤이 이동하는 것을 보고 있을 필요도 없을 것 같아요.

[yunseorim1116]

이렇게 사고하셨군요.... 정말 멋지십니다!!!!

[lukasjhan]

감사합니담 ㅎㅎㅎㅎ