From 3566144783e4f0f6aea8869ec2a75f18bc580c21 Mon Sep 17 00:00:00 2001 From: zenn Date: Fri, 3 Jul 2026 18:13:47 +0900 Subject: [PATCH] =?UTF-8?q?HTML=20=EB=AC=B8=EC=84=9C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EC=8B=9C=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=9E=94=EC=83=81=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - bfcache 복원 시 라우터 경로와 실제 URL 어긋남 감지해 새로고침하는 클라이언트 플러그인 추가 - HTML 문서 모드 페이지 진입 후 뒤로가기에서 주소는 홈이나 페이지가 남던 현상 해결 - v1.10.32 Co-authored-by: Cursor --- docs/map.md | 1 + docs/update.md | 5 ++++ package.json | 2 +- plugins/bfcache-page-restore.client.js | 38 ++++++++++++++++++++++++++ 4 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 plugins/bfcache-page-restore.client.js diff --git a/docs/map.md b/docs/map.md index af2269f..cc738a7 100644 --- a/docs/map.md +++ b/docs/map.md @@ -360,6 +360,7 @@ | server/routes/admin/api/analytics/traffic.get.js | 관리자 유입원·디바이스·키워드 통계 API | | server/routes/admin/api/analytics/range-detail.get.js | 관리자 통계 추이 날짜·구간 상세 API | | plugins/site-analytics.client.js | 공개 라우트 pageview·heartbeat·read 클라이언트 전송 | +| plugins/bfcache-page-restore.client.js | 뒤로가기 캐시(bfcache) 복원 시 라우터 경로와 실제 URL 어긋남을 감지해 새로고침(HTML 문서 모드 페이지 이동 후 뒤로가기 잔상 방지) | ## 데이터베이스 diff --git a/docs/update.md b/docs/update.md index 733cd55..f780a29 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 이력 +## v1.10.32 + +- HTML 문서 모드 페이지 진입 후 뒤로가기 시 주소는 홈이지만 페이지 화면이 남던 문제 수정. +- bfcache 복원 시 라우터 경로와 실제 URL이 어긋나면 새로고침하는 클라이언트 플러그인 `bfcache-page-restore.client.js` 추가. + ## v1.10.31 - 헤더 사용자 메뉴의 `Sign up`·`Sign in`을 `회원가입`·`로그인`으로 한글화. diff --git a/package.json b/package.json index d6873a5..aa2d593 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "1.10.31", + "version": "1.10.32", "private": true, "type": "module", "imports": { diff --git a/plugins/bfcache-page-restore.client.js b/plugins/bfcache-page-restore.client.js new file mode 100644 index 0000000..712c9e8 --- /dev/null +++ b/plugins/bfcache-page-restore.client.js @@ -0,0 +1,38 @@ +/** + * 뒤로가기/앞으로가기 캐시(bfcache) 복원 시 라우터 상태와 실제 URL이 어긋나면 새로고침한다. + * + * HTML 문서 모드 고정 페이지(`/pages/:slug`)로 SPA 내부 이동하면, 원문 HTML을 받기 위해 + * `window.location.reload()`가 실행되면서 직전 문서(예: 홈)가 "라우터는 페이지 경로인데 + * URL은 홈"인 어긋난 상태로 bfcache에 저장된다. 이 문서가 뒤로가기로 복원되면 주소는 + * 홈이지만 화면은 페이지가 남는 문제가 생기므로, 어긋남을 감지해 새로고침으로 정상화한다. + */ + +/** + * 경로 끝 슬래시·쿼리·해시를 제거해 비교용으로 정규화한다. + * @param {string} path - 원본 경로 + * @returns {string} 정규화된 경로 + */ +const normalizePath = (path) => { + const clean = String(path || '').split('?')[0].split('#')[0] + if (clean.length > 1 && clean.endsWith('/')) { + return clean.slice(0, -1) + } + return clean +} + +export default defineNuxtPlugin(() => { + const router = useRouter() + + window.addEventListener('pageshow', (event) => { + if (!event.persisted) { + return + } + + const routePath = normalizePath(router.currentRoute.value.path) + const locationPath = normalizePath(window.location.pathname) + + if (routePath !== locationPath) { + window.location.reload() + } + }) +})