Next.js의 페이지 구조

서론

Next.js의 핵심기능은 편하게 SSR을 지원하는 것이다.

Next.js에서는 page기반 router 방식과 app기반 router 방식을 제공하는데 이것을

page router, app router이라고 칭하며,

Next.js 12버전까지는 page rotuer만을 사용하였고, 13버전 이후부터는 app router 위주의 개발이 시작 되었습니다.

라우팅 방식의 차이에 따라 이전글에 설명 했듯 Next.js는 다른 폴더구조를 가지며

SSR의 원활한 구현을 위해서 페이지의 구조도 변경 되어야합니다.

page router방식은 구글링단계에서 쉽게 구현이 검색이 가능하기에 app router방식으로만 작성하겠습니다.

서버 컴포넌트 / 클라이언트 컴포넌트

앱 라우터의 페이지 구조를 작성할 때는 새로 도입된 개념인 “use client”을 알아야한다.

SSR의 구현을 위해 getServersideProps, initialProps, _document를 사용하던 페이지 라우팅 방식과 다르게

app router은 기본적으로 SSR을 제공하며 그에 따라 “서버 컴포넌트”, “클라이언트 컴포넌트” 로 구분 되며,

가장 큰 특징들은 아래와 같다.

1. “서버 컴포넌트”

• 기본 컴포넌트
• 일반적인 SSR방식
• 서버에서 동작되는 컴포넌트로 useState, useEffect… 등 script영역에서 사용되는 hooks를 사용 할 수 없다.

1. “클라이언트 컴포넌트”

• “use client”를 최상단에 선언후 작업된 컴포넌트
• SSR처리 후 클라이언트 단 에서 스크립트가 동작한다.
• useState, useEffect… 등 hooks를 일반적으로 사용할 수 있다.

페이지 구조 (SSR)

getServersideProps, initialProps, _document 등을 지원하지않는 13버전이후 app router 기반의 next.js에서는 다음과 같이 “서버 컴포넌트” 기반의 페이지를 만들고 “클라이언트 컴포넌트” 기반의 컴포넌트를 작성하여 import해오는 방식을 “권장” 하고 있다.

// ---- /app/page.tsx ----
import Component from "@/components/pages/....";

const Page = () => {
  return <Component />;
};

export default Page;

이렇게만 봐서는 왜 이렇게 하는지 알 수 없을 수 있다.

이런 방식이 권장되는 가장 큰 이유 2가지는 아래와 같다.

1. SSR 단계에서의 서버 데이터 조회
2. 보안

SSR 단계에서의 서버 데이터 조회

페이지 단계에서 “use client”를 사용할 경우 해당 페이지는 “클라이언트 컴포넌트”로 인식되며,

HTML요소에 대해서는 SSR 처리가 가능하지만 서버측 데이터를 불러오는 과정은

useEffect훅을 사용하여 라이프사이클을 구현 하고 호출해야 한다.

라이프 사이클에 의하여 호출된 API는 클라이언트 단 에서의 동작이기 때문에 CSR처리가 되며 CSR의 가장큰 특징인 “화면이 깜빡이는 현상”, “SEO 크롤링 불가” 같은 문제점이 발생한다.

그렇기에 아래 코드 처럼 페이지는 서버컴포넌트로 작성하고, 주 내용은 “클라이언트 컴포넌트” 를 만들어 hooks를 사용한다.

const fetchData = async (company: string) => {
  try {
    const result = await fetch(...);

    if (result.code === 200) {
      return result.data;
    } else {
      throw Error();
    }
  } catch (error) {
    return initialReview.list;
  }
};

const Page = async ({
  params,
}: {
  params: { company: string };
}) => {
  const data = await fetchData(params.company);
  return (
	  // 해당 Component는 "use client" 선언 후 작성
    <Component
      data={data}
    />
  );
};

export default Page;