Nuxt에서 뒤로가기 시 bfcache를 사용하지 않고 리렌더링, 리페인팅되는 이슈

특정 상황에서 뒤로가기를 했을 때 페이지가 리렌더링 + 리페인팅이 되면 사용자 경험(UX)가 떨어지는 경우가 발생한다.

 

예를 들어 포스트 목록을 스크롤 다운하다가 하나를 클릭했지만 원하는 포스트가 아니라 뒤로가기를 눌렀을 때 리렌더링되며 맨 위로 다시 올라가게 된다면 사용자 경험이 떨어질 수 밖에 없다.

 

https://github.com/nuxt/nuxt/issues/6451

Prevent re-render / re-paint of a page when you press the browser back button · Issue #6451 · nuxt/nuxt

nuxt bfcache

이 이슈는 나만 겪는게 아니었고 위 커뮤니티에서 얘기를 나누고 있다.

여러가지 방법을 시도해봤지만 다른 프레임워크로 작업했을 때처럼 뒤로가기 시 캐시를 사용하지 않고 리렌더링이 발생했다.

 

그래서 근본적인 해결책을 찾지는 못했다.

 

해결 방향

그래서 필자는 위에 답변한 것처럼 Nuxt 생명주기를 활용해 직접 vuex를 통해 bfcache를 만들어 해결했다.

보안적인 이슈 때문에 자세한 코드를 올리지는 못하지만 방법을 간단하게 소개하자면

 

1. scrollBehavior를 통해 스크롤 위치를 관리

2. created, destroyed를 통해 페이지 데이터를 캐싱

3. vuex + middleware를 통해 데이터의 유효 기간 관리

 

위 방법을 통해 직접 bfcache를 만들어 이 이슈를 해결했다.

 

https://nuxtjs.org/docs/configuration-glossary/configuration-router#scrollbehavior

The router Property

내가 근본적인 방법을 찾지 못했을 수도 있지만 여태까지 조사한 내용으로 보면 Nuxt에서는 bfcache를 지원하지 않는 것으로 확인했고 이 이슈는 UX를 떨어지게 할 뿐아니라 페이지에 코스트가 높은 api 요청이 포함되어 있다면 부하도 불러올 수 있다.