[Next.js] pre-rendering

 

 

Next.js는 기본적으로 모든 페이지를 pre-render 한다.

 

 

Next.js

 

Next.js는 리액트에서 SSR(Server Side Rendering) 을 쉽게 구현할 수 있도록 도와주는 간단한 프레임워크

Next.js는 pre-rendering을 통해 완성된 HTML을 가져오기 때문에 검색 엔진 크롤러에 바로 렌더링 된 페이지를 전달할 수 있어 검색 엔진 최적화(SEO)를 이룰 수 있다.

초기 페이지 로드 속도 또한 CSR(Client Side Rendering)에 비해 빠르다는 장점을 가지고 있다.

 

 

 

Pre-rendering

 

Next.js는 두 가지 방식으로 pre-rendering을 지원한다

• 정적 생성 (Static Generation)
• 서버 사이드 렌더링 (Server Side Rendering)

 

 

정적 생성 (Static Generation)

 

정적 생성 방식은 빌드 시 HTML을 미리 생성하는 방식

미리 정적으로 생성된 HTML 파일은 CDN에 저장되어 같은 요청에 재사용된다.

각 페이지는 애플리케이션이 빌드될 때 한 번 생성되고, 모든 사용자가 동일한 HTML을 전달받음

자주 변경되지 않는 페이지에 적합하다.

 

CDN : 전 세계 여러 지역에 분산된 서버 네트워크를 활용해 웹 콘텐츠를 사용자에게 빠르게 제공하는 시스템

 

사용 방법

• getStaticProps : 빌드 시 데이터를 가져와서 페이지에 전달
• getStaticPaths : 동적 라우팅을 사용하여 빌드 시 생성할 경로를 지정

// pages/posts/[id].js
import { useRouter } from 'next/router';
import fs from 'fs';
import path from 'path';

export async function getStaticPaths() {
  const postsDirectory = path.join(process.cwd(), 'posts');
  const filenames = fs.readdirSync(postsDirectory);
  const paths = filenames.map((filename) => ({
    params: { id: filename.replace(/\.md$/, '') },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postsDirectory = path.join(process.cwd(), 'posts');
  const filePath = path.join(postsDirectory, `${params.id}.md`);
  const content = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      content,
    },
  };
}

export default function Post({ content }) {
  return <div>{content}</div>;
}

 

 

 

서버 사이드 렌더링 (Server Side Rendering)

 

서버 사이드 렌더링 방식은 각 요청 시 서버에서 HTML을 생성하는 방식.

사용자마다 다르거나 자주 변경되는 데이터가 있는 페이지에 적합하다.

 

사용 방법

• getServerSideProps : 서버 사이드 렌더링을 사용하려는 페이지에 사용

// pages/profile.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  const data = await res.json();

  return {
    props: {
      user: data,
    },
  };
}

export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

 

 

 

Next.js 13 버전 이후 달라진 점

 

Next.js 13 버전 이후로부터는 App Router를 사용해 getStaticProps, getServerSideProps를 더이상 사용하지 않고 클라이언트 컴포넌트, 서버 컴포넌트로 구분해 페이지별로 다양한 데이터 패칭 방법을 적용할 수 있다.

 

 

장점 

• 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분할 수 있음
• 동적 및 정적 렌더링을 직관적으로 처리할 수 있음