Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유

우리 회사는 Next로 랜딩페이지를 관리하고 있다.

 

첫 렌더링을 SSR로 하게 된다.

 

한편 반응형은 CSS로도 하고, useWindowSize라는 커스텀훅으로도 하고 있다.

 

useWindowSize훅은 다음과 같다.

// useWindowSize.ts

import { useState, useEffect } from 'react';

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState<{
    width?: number;
    height?: number;
  }>({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
};

이 useWindowSize를 이용하여 다음과 같이 분기하고 있다.

const GeneralTemplate: React.FC<Props> = props => {
  const { width, height } = useWindowSize();
  const isMobileMode = width ? width <= MIN_DESKTOP_SIZE : false;

  return (
    {isMobileMode ? (
        <MobileHeader />
      ) : (
        <GeneralHeader />
      )}
)

문제는 서버사이드 렌더링시 window객체가 없기 때문에 width와 height가 undefined가 되고, isMobileMode가 false가 되어버린다.

 

그러면서 모바일에서의 GeneralHeader를 먼저 렌더링 한 후에 CSR로 전환되면서 MobileHeader를 렌더링 하게 된다.

 

즉, useWindowSize가 있으면 모바일에서는 무조건 리렌더링을 하게 된다.

 

때문에 useWindowSize를 다 걷어내고 CSS로 정통 반응형을 작성하기로 했다.

---

BFF  도 고려하고 있는데, 이는 팀원들과 더 논의해보아야 할 것 같다.

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?