🐛 restore scroll 깜빡임 문제 해결

gatsbyjs/gatsby#28794 (comment)

gatsby-browser.tsx

@@ -3,22 +3,29 @@ import '@fontsource/fira-mono';
 import './src/styles/global.css';
 import 'prismjs/themes/prism-tomorrow.css';
 
-const UPDATE_SCROLL_TIME_OUT = 1;
+import type { GatsbyBrowser } from 'gatsby';
 
-export const shouldUpdateScroll = ({ routerProps: { location }, getSavedScrollPosition }) => {
-  const isRootPath = location.pathname === '/';
+const UPDATE_SCROLL_TIME_OUT = 1;
 
-  if (!isRootPath && location.action === 'PUSH') {
-    window.setTimeout(() => window.scrollTo(0, 0), 0);
-  } else if (isRootPath && location.action == null) {
-    // 브라우저의 앞/뒤 버튼을 사용한 경우
-    const savedPosition = getSavedScrollPosition(location) || [0, 0];
-    window.setTimeout(() => window.scrollTo(...savedPosition), UPDATE_SCROLL_TIME_OUT);
-  }
+/**
+ * 블로그 상세 페이지에서 뒤로가기를 눌렀을 때 스크롤 위치를 유지하기 위한 설정
+ * 스크롤 복원할 때, 블로그 상세 페이지의 스크롤이 홈에서 저장된 스크롤 위치로 먼저 복원되고,
+ * 블로그 홈으로 이동되서 잠깐 깜빡이는 문제를 해결하기 위함
+ * @see https://github.com/gatsbyjs/gatsby/issues/28794#issuecomment-905173663
+ */
+export const shouldUpdateScroll: GatsbyBrowser['shouldUpdateScroll'] = ({
+  routerProps: { location },
+  getSavedScrollPosition,
+}) => {
+  window.history.scrollRestoration = 'manual';
+  const currentPosition = getSavedScrollPosition(location);
+  window.setTimeout(() => {
+    window.scrollTo(...currentPosition);
+  }, UPDATE_SCROLL_TIME_OUT);
   return false;
 };
 
-export const onServiceWorkerUpdateReady = () => {
+export const onServiceWorkerUpdateReady: GatsbyBrowser['onServiceWorkerUpdateReady'] = () => {
   const answer = window.confirm(
     `새로운 버전이 있어요. ` + `다시 로드하여 새로워진 블로그를 만나보세요`
   );