이미지 <Image>

폰트

Third-Party Script

google analytics

메타태그 (metadata, generateMetadata)

Lazy loading

• isVisible로 버튼 클릭 시에만 HeavyComponent를 보이게 했지만, 실제로는 page.js 번들에 HeavyComponent가 다운로드 되어 있는 것을 볼 수 있다. 이는 불필요한 동작으로 실제 버튼을 클릭했을 때만 해당 컴포넌트를 받아오면 된다. (주석 제외)

'use client';

// import { getServerSession } from 'next-auth';
import ProductCard from './components/ProductCard/ProductCard';
// import { authOptions } from './api/auth/[...nextauth]/route';
import HeavyComponent from './components/HeavyComponent';
import { useState } from 'react';

export default function Home() {
  const [isVisible, setVisible] = useState(false);
  // const session = await getServerSession(authOptions);

  return (
    <main>
      <h1>Hello World</h1>
      <button onClick={() => setVisible(true)}>Show</button>
      {isVisible && <HeavyComponent />}
      <ProductCard />
    </main>
  );
}

해결책

dynamic

• 리액트의 다이내믹 임포트랑 비슷한 것 같다.

  https://medium.com/@shubham3480/dynamic-imports-in-react-3e3e7ad1d210

  https://velog.io/@code-bebop/dynamic-import와-React.lazy

'use client';

import { useState } from 'react';
// 수정된 부분
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('./components/HeavyComponent'), {
	// browser API를 사용했을 경우, SSR은 오류가 난다. 그 때 쓸 수 있는 설정
	ssr: false,
	// 아래와 같이 로딩을 추가할 수도 있다.
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  const [isVisible, setVisible] = useState(false);

  return (
    <main>
      <h1>Hello World</h1>
      <button onClick={() => setVisible(true)}>Show</button>
      {isVisible && <HeavyComponent />}
    </main>
  );
}

버튼을 눌렀을 때만 해당 컴포넌트를 서버에서 받아 온다.

❓서버 컴포넌트는 왜 안 받아와지지? (use client를 써야하는 이유)

Lodash를 최적화 하여 받아오는 방법

기존에는 전체 라이브러리를 page.js 번들에 포함시킨다.

// 기존
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import _ from 'lodash';

export default function Home() {
  const [isVisible, setVisible] = useState(false);

  return (
    <main>
      <h1>Hello World</h1>
      <button
        onClick={() => {
          const users = [{ name: 'c' }, { name: 'b' }, { name: 'a' }];
          const sorted = _.orderBy(users, ['name']);
          console.log(sorted);
        }}
      >
        Show
      </button>
    </main>
  );
}