[Next.js] router.push 한 후, 이동한 페이지의 useEffect가 실행되지 않는 이유

 

Next.js의 router.push가 클라이언트 사이드 내비게이션을 수행하기 때문입니다.

클라이언트 사이드 내비게이션은 동일한 페이지 컴포넌트가 유지된 상태에서 URL만 업데이트하므로 해당 컴포넌트의 useEffect가 다시 실행되지 않습니다.

 

해결 방법

1. 강제 새로고침 사용

window.location.href를 사용하여 강제로 새로고침할 수 있습니다. 이 경우 useEffect는 실행됩니다.

const handleGoToBack = () => {
  window.location.href = '/chat';
};

 

2. 라우팅 시 상태 관리

router.push와 함께 특정 상태를 관리하거나 key를 변경하여 useEffect를 강제로 실행하도록 할 수 있습니다.

const handleGoToBack = () => {
  router.push('/chat');
  router.replace('/chat'); // `replace`를 사용해 URL을 다시 갱신
};

 

3. 라우터 이벤트 감지

Next.js의 useRouter에는 라우터 이벤트를 감지할 수 있는 방법이 있습니다. 이를 활용해 경로 변경 시 동작을 트리거할 수 있습니다.

import { useRouter } from 'next/router';

useEffect(() => {
  const handleRouteChange = (url) => {
    if (url === '/chat') {
      console.log(`
      
      
      
      
      /chat
      
      
      
      
      `);
    }
  };

  router.events.on('routeChangeComplete', handleRouteChange);

  return () => {
    router.events.off('routeChangeComplete', handleRouteChange);
  };
}, [router.events]);

 

4. 키 값으로 리렌더링 트리거

컴포넌트의 key를 변경해 강제로 재렌더링되도록 할 수도 있습니다.

const [key, setKey] = useState(0);

const handleGoToBack = () => {
  router.push('/chat');
  setKey((prev) => prev + 1); // 키 변경으로 컴포넌트 강제 리렌더링
};

// 적용
<ChatContent key={key} />;