인프런 커뮤니티 질문&답변

네 맞습니다.

로그아웃시에 router.refresh()를 적용한 상태입니다.

제 프로젝트에서는 30초가 지나도 세션이 초기화가 안되는 것 같습니다..; ,

제로초님이 배포하신 https://z.nodebird.com/ 에서는 말씀대로 30초 후에 재 로그인하니 세션이 바뀌네요.

30초동안 캐싱되는 이유가 궁금합니다.

그리고, Link 대신 a 태그를 쓰거나 location.href = '/'로 이동하는 방법을 사용하게 되면
SPA의 장점이 사라지는 것이라 생각해, 좋지 않은 방법이 아닌가요??

그렇다면 next-auth를 사용하여 로그인 / 로그아웃을 구현하였을 때, session 정보는 30초동안의 캐싱을 무조건 가져가게 되는 건가요 ??

https://nextjs.org/docs/app/building-your-application/caching#duration-3

30초동안 캐싱되는 이유는 30초 동안 캐싱된다고 되어있기 때문입니다... ㅎㅎㅎㅎ

a나 location.href를 사용하는 게 안 좋아서 router.refresh()로 캐싱을 없애는 건데 지금 버그인지 몰라도 안 되는 것 같습니다. 원래 저걸로 해결되는 거 확인하고 올린 거였거든요.

router.refresh()를 router.replace 위에 두냐 아래에 두냐에 따라서도 동작이 다릅니다.

이거 이제 그냥 로그아웃 시에 다음처럼 적으면 바로 잘 되는 것 같네요.

signOut({ callbackUrl: '/' });

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
      static: 180,
    },
  },
  async rewrites() {
    return [
      {
        source: "/upload/:slug",
        destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination
      },
    ];
  },
};

export default nextConfig;

이렇게 설정했는데 방법이 맞는지 모르겠네요.. 여튼 dynamic을 0 or 1로 바꾸어봤는데 안되네요.

그리고 또 이상한 부분을 발견했는데,

로그아웃 버튼은 그대론데 재 로그인시에, PostForm에 있는 이미지는 바뀌네요..
여기 부분 이미지 입니다.

여기 부분 이미지는 home에 있는 page.tsx에서

const session = await auth();

으로 받아서 prop으로 내려주고,

로그아웃 버튼은 layout.tsx에서

const session = await auth();

로 똑같이 받아서 prop으로 똑같이 내려주는데 결과가 다른게 아이러니 하네요.

page와 layout의 차이라고 하기엔 어차피 afterLogin에 있는 layout이라서 로그인후에 둘다 리렌더링 되는건 마찬가지인데, 왜 결과가 다른걸까요..?
많은 질문 죄송합니다

레이아웃과 페이지가 캐싱이 다르게 됩니다. layout 부분만 전 세션으로 캐싱되어 있는 상황입니다.

signOut({ callbackUrl: '/' });

네 이렇게 하니까 해결됐습니다 ㅠㅠㅠ

진짜 이것 때문에, 며칠 고생했었는데, 드디어 해결했네요.
감사합니다 제로초님!

덕분에 저도 고쳤습니다! 감사합니다