NextJS에서 SSR 렌더링 사용시 redirect시 useLayoutEffect 사용 경고

Reference

- ( https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 )

 

 

SSR으로 axiosRefreshAPI가 실패 할 경우 reriect를 이용하여 메인 페이지로 보내게 SSR 실행하게 만들었다.

 

 

해당 Home 컴포넌트가 호출 되면서 useLayoutEffect에 경고 에러가 발생했다. Reference를 참고하여 2번째 방법으로 해결했다.

 

function Parent() {
  const [showChild, setShowChild] = useState(false);
  
  // Wait until after client-side hydration to show
  useEffect(() => {
    setShowChild(true);
  }, []);
  
  if (!showChild) {
    // You can show some kind of placeholder UI here
    return null;
  }

  return <Child {...props} />;
}

function Child(props) {
  useLayoutEffect(() => {
    // This is where your layout effect logic can be
  });
}