[TIL] Day 59 use client 최소화 시키기 위한 노력 (Next.js)

2023.12.27 수

 

- Next.js의 장점인 SSR을 활용하지 못하기 때문에
- 콘솔로그 찍어가며 어느 부분이 클라이언트 사이드 렌더링을 필요로 하는지
- 처음에는 useState인줄 알았으나 아니었다. 아마 submit쪽인듯
- 해당 부분 찾은 후 해당부분을 컴포넌트화. 그 컴포넌트만 use client 적용

- 컴포넌트 최상단에 "use client" 작성

 

 

 

 

1. useClient란?

Next.js에서 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)를 명확히 구분하는 데 사용되는 특별한 훅입니다.
이 훅은 클라이언트 사이드에서만 실행되어야 하는 로직을 포함하는 컴포넌트를 지정하는 역할을 합니다.

[NeXT 공식 문서](https://nextjs.org/docs/advanced-features/data-fetching#use-client)

 

 

2. useClient 사용 사례

- 데이터 로딩
클라이언트 사이드에서만 필요한 데이터를 로딩할 때 활용합니다.
예를 들어, 페이지 로드 후 추가적인 데이터를 클라이언트에서 동적으로 불러와야 할 때 사용할 수 있습니다.

import { useClient } from 'next/data-client';

const MyComponent = () => {
  const client = useClient();

  useEffect(() => {
    // 클라이언트 사이드에서만 동작하는 데이터 로딩 로직
    client.fetchData();
  }, []);

  // 나머지 컴포넌트 코드
};

-렌더링 최적화
클라이언트 사이드에서만 필요한 렌더링 최적화를 수행할 때 사용합니다.
예를 들어, 특정 이벤트가 발생했을 때만 컴포넌트를 다시 렌더링하는 로직을 구현할 수 있습니다.

import { useClient } from 'next/data-client';

const MyOptimizedComponent = () => {
  const client = useClient();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 클라이언트 사이드에서만 동작하는 렌더링 최적화 로직
    client.optimizeRendering();
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
};

 

3. 주의사항

useClient를 사용하는 경우, 해당 컴포넌트가 클라이언트 사이드에서만 실행되어야 함을 명심해야 합니다.
서버 사이드에서 실행되는 컴포넌트에서는 useClient를 사용하지 않도록 주의해야 합니다.
[NeXT 공식 문서](https://nextjs.org/docs/advanced-features/data-fetching#use-client)에서 제공하는 가이드라인을 따르는 것이 중요합니다.

 

4. 결론

useClient를 적절하게 활용하면 Next.js에서 클라이언트 컴포넌트를 효과적으로 관리하고 최적화할 수 있습니다.
이를 통해 더 나은 사용자 경험과 성능을 제공할 수 있습니다.

 

 

 

해당 내용은 추가적인 정리가 필요...!

use client와 useClient는 사용방법이 상이하다.

전체적으로 정리하자.