home 페이지 성능 개선하기 - BFCache

[robinyoon-dev]

Description

Device가 desktop일 때 결과

DIAGNOSTICS

Page prevented back/forward cache restoration

Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. Learn more about the bfcache

➡️ back/forward 캐시를 저장하도록 만들어보자.

Todo

• edit 페이지와 check 페이지의 '홈으로 돌아가기'버튼에 router.back() 적용.
• 페이지가 캐시 가능한지 테스트해보기
• 뒤로가기, 앞으로가기 버튼을 눌렀을 때 BFCache를 사용할 수 있도록 확인해보기.
• BFCache 관찰하는 API로 관찰하기.
• 문서화

[robinyoon-dev]

BFCache란?

• Back/forward cache의 약자로 브라우저 최적화 중 하나이다. 브라우저에서 bfcache로 어떻게 최적화 하는지 알고 있어야 BFCache를 최대한 사용하면서 navigating(뒤로/앞으로 가기)시에도 기존 코드가 잘 호출되게끔 할 수 있다.

• 사용자가 브라우저 내에서 뒤로가기/앞으로가기 했을 경우 이전 페이지를 전체 캐싱해서 in memory로(자바스크립트 heap 영역까지) 가지고 있는 것을 말한다.

• 전체 페이지를 in memory에 저장하므로 뒤로가기/앞으로가기 했을때 복구가 훨씬 빠르고, 그러다보니 사용자 경험을 굉장히 향상시킬 수 있다.

BFCache vs HTTP Cache

• HTTP 캐시는 이전에 만들어진 요청에 대한 응답만 캐싱함.

• 페이지 로딩에 필요한 최적화를 HTTP캐시로 모두 하기는 어렵기 때문에

• BFCache를 사용하지 않고, 아무리 최적화를 잘 했다고 하더라도 BFCache를 사용한 경우가 무조건 빠르다.

---

참고자료
BFCache 이해, 최적화 방법

[robinyoon-dev]

Next.js router.back을 써보자.

https://nextjs.org/docs/pages/api-reference/functions/use-router#routerback

[robinyoon-dev]

현재 edit 페이지의 EditBoardForm 코드 일부

function EditBoardForm(props) {
  const router = useRouter();
  const goToHomeHandler = () => {
    // 데이터 옮김.
    const loginData = localStorage.getItem("user");
    const routerLoginData = loginData;
    router.push(
      {
        pathname: "/home",
        query: { routerLoginData },
      },
      "/home"
    );
  };

홈으로 돌아갈 때 로그인데이터를 옮겨야하는 번거로운 작업을 하는 것을 발견했다.
이를 router.back으로 수정해보자.

❓기타 궁금증
난 분명 로그인 데이터 관련해서 쿠키를 썼을텐데, 왜 여기에선 로컬스토리지로 되어 있는거지....?