[Next.js] 기본 개념 정리

Aneb·2022년 8월 13일

1. Data Fetching

Next.js가 제공하는 데이터 패칭방법은 다음과 같이 4가지로 정리할 수 있다.

1.1 SSR

SSR 방식으로 데이터패칭을 할때는 getServerSideProps함수를 통해 가능하며, Next.js의 공식문서에서 설명하는 개념은 다음과 같다.

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps

1.2 CSR

CSR 방식은 말그대로 클라이언트단에서 처리를 하는 방식으로, 따로 함수를 두고 있지는 않다.

1.3 SSG(Static-Site Generation)

정적인 사이트를 생성하는 경우에 사용되며, getStaticProps 함수를 이용한다. Next.js의 공식문서에서 설명하는 개념은 다음과 같다.

If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

SSG는 빌드타임 시점에 데이터패칭한 데이터들을 보여준다.
테스트를 위해서는 dev모드가 아닌 build모드로 해야 한다.(dev에서는 ssr처럼 동작함)
블로그처럼 정적인 사이트들은 업데이트시에만 SSG로 빌드하여 서버부하를 줄일 수 있다는 장점이 있다.

1.4 ISR(Incremental Static Regeneration)

증분 정적 사이트를 재생성하는 방식이다.
특정주기로 데이터를 가져와서 다시 그려준다.

2. Pages

Next.js 는 모든 페이지를 프리렌더링(Pre-rendering)한다.
(프리렌더 후 리액트 하이드레이션 일어남)
프리렌더를 통해 넥스트는 SEO 관리가 가능하다.
(클라이언트처럼 동작하지 않는 검색엔진의 경우 아무런 데이터를 조회해 갈 수 없으므로)

Next.js 의 프리렌더링 방식은 다음과 같이 나눌 수 있다.

SSG : 빌드 타임에 프리렌더

SSR : 요청 타임에 프리렌더

Next.js는 위 두가지 방식 중 SSG를 쓰라고 적극 권장한다고 한다. SSG에 대해 좀 더 살펴보면, 다음과 같이 2가지 케이스로 나누어 볼 수 있다.

Page의 내용물이 외부 데이터에 의존적일때
→ getStaticProps만 가지고도 가능

Page Paths까지 외부 데이터에 의존적인 상황
→ getStaticPaths도 함께 활용해야 가능

3. Layout

각 페이지에 공통적으로 사용되는 레이아웃의 경우 다음과 같이 사용 가능
pages안의 _app.js(모든페이지를 품을 수 있는 코드, 넥스트에서 자체적으로 제공하는 기능)에 모든 컴포넌트를 감싸는 레이아웃컴포넌트를 불러와서 사용
getLayout 함수 이용하여 복잡한 중첩 레이아웃 구성 가능

Next.js에서 설명하는 getLayout 함수는 다음과 같다.

If you need multiple layouts, you can add a property getLayout to your page, allowing you to return a React component for the layout. This allows you to define the layout on a per-page basis. Since we're returning a function, we can have complex nested layouts if desired.

기본적인 레이아웃 이외에 중첩 레이아웃을 구성할 경우 예시는 다음과 같다.

//subLayout을 적용할 컴포넌트

    컴포넌트명.getLayout = function getLayout(page){
    	return (
    		<Layout>
    			<SubLayout>{page}</SubLayout>
    		</Layout>
    	)
    }

먼저 중첩 레이아웃을 설정하고싶은 페이지의 컴포넌트에서 getLayout함수를 호출하여 중첩 레이아웃을 리턴해준다.

그리고 _app.js 파일에서 getLayout함수가 있는 경우, 없는 경우를 체크하는 getLayout을 선언해준다. (네이밍은 자유롭게 해도 상관없다.)

// _app.js파일

    const getLayout= Component.getLayout ||((page)=> <Layout>{page}</Layout>
    // getLayout이 있다면 그걸 실행하고, 없다면 레이아웃을 불러온다.
    
    return getLayout({<Component {..pageProps} />)