[Next.js] 쉬운 성능 최적화 방법 소개

초기에  페이지를 로딩할 때 성능을 최적화하기 위한 몇 가지 방법을 소개하려고 한다.

 

1. 함수 내부에서 import하기

파일을 실행하면서 import를 하면 당장 쓰이지 않을 모듈도 모두 import된다. 이를 함수 내부에 적어주면 함수가 실행되면서 import되기 때문에 초기 실행 시간을 조금 더 단축할 수 있다.

// import { getNewProducts } from "@/services/server-action";
import Banner from "@/components/Banner";
import NewProductList from "@/components/NewProductList";

const HomePage = async () => {
  const { getNewProducts } = await import("@/services/server-action");
  const { data } = await getNewProducts();

  return (
    ...
  );
};

export default HomePage;

 

2. Next.js의 `dynamic` 사용하기

특정 컴포넌트를 지연 로딩(다이나믹 로딩)하고 싶을 때 사용할 수 있다. 

import { getNewProducts } from "@/services/server-action";
// import Banner from "@/components/Banner";
import NewProductList from "@/components/NewProductList";
import dynamic from "next/dynamic";

const Banner = dynamic(() => import("@/components/Banner"),{
  ssr: false, // Server side rendering 시에는 참여하지 않음.
})

const HomePage = async () => {
  const { data } = await getNewProducts();

  return (
    ...
  );
};

export default HomePage;

 

3. 가급적 static 페이지로 만들기

Static 페이지로 만들었다는 것은 서버에서 렌더링되어 저장되어 있는 페이지로 만들었다는 것이므로 당연히 로딩 시간이 엄청 적을 것이다. 따라서 static 페이지의 개수를 늘리는 것이 좋다.