[Next.js] 사전 렌더링 시 데이터 가져오기

// 사전 렌더링 시 데이터 가져오기

- 초기에 반환하는 HTML 코드에 데이터가 있는 페이지를 사전 렌더링해야 Next의 의미가 있다.
   > SEO 향상!

- Next.js의 사전 렌더링 방법 두 가지

1. Static Generation
2. Server-side Rendering

---

// Static Site Generation (SSG)

- production 용으로 build하는 시점에 사전 렌더링된다.

- 항상 다시 생성하는 것이 아니라 cache하고 다시 사용하기 때문에 빠르다.

- page 컴포넌트에 데이터를 가져와서 추가해야 한다면 page 컴포넌트 파일 안에서 getStaticProps 함수를 export 해야 한다. 
  > Next는 Promise 반환을 기다린다.

export async function getStaticProps() {
  return {
    props: {},
  };
}

- getStaticProps 함수 안에서는 일반적으로 server에서 사용하는 코드를 모두 작성할 수 있다.

function 컴포넌트명(props) {
  return ;
}

- return 한 props는 해당 파일의 component에서 props로 받는다.

export async function getStaticProps() {
  return {
    props: {},
    revalidate: 대기 시간(s)
  };
}

- data 가 바로바로 update 되지 않는다는 단점이 있기 때문에 data가 자주 바뀐다면 revalidate라는 property를 추가해줘야 한다.

export async function getStaticProps(context) {
  const 변수명 = context.params.식별자명;
  
  return {
    props: {},
    revalidate: 대기 시간(s)
  };
}

- context를 통해 url의 param을 받아올 수 있다.

---

import MeetupList from '../components/meetups/MeetupList';

const DUMMY_MEETUPS = [
  {
    id: 'm1',
    title: 'A First Meetup',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Lehesten_2012_x14.JPG/1024px-Lehesten_2012_x14.JPG',
    address: 'Some address 5, 12345 Some City',
    description: 'This is a first meetup!',
  },
  {
    id: 'm2',
    title: 'A Second Meetup',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Lehesten_2012_x14.JPG/1024px-Lehesten_2012_x14.JPG',
    address: 'Some address 10, 12345 Some City',
    description: 'This is a second meetup!',
  },
];

function HomePage(props) {
  return <MeetupList meetups={props.meetups} />;
}

export async function getStaticProps() {
  return {
    props: { meetups: DUMMY_MEETUPS },
  };
}

export default HomePage;

---

※ getStaticPaths

- SSG을 사용할 때, 동적 경로를 사용하는 페이지에 대한 목록을 생성한다.

- getStaticProps와 함께 사용되어서 build 시에 어떤 동적 page들이 미리 생성되어야 하는지를 정의한다.

- 동적 routing을 사용하는 페이지에서 주로 사용된다.

export async function getStaticPaths() {
  return {
    fallback: Boolean값,
    paths: [
      { params: { 동적경로식별자명:  } },
    ],
  };
}

• paths: 미리 렌더링할 경로 배열을 설정한다.
• params: 동적 페이지의 식별자 명과 실제 입력값을 객체로 설정한다.
• fallback: paths에 설정되지 않은 경우를 처리한다.
  ~ false: 404 페이지 반환
  ~ true: 백그라운드에서 해당 페이지를 생성하여 보여준다.(빈 초기화면에서 교체)
  ~ blocking: 페이지가 미리 생성될 때까지 아무것도 보여주지 않는다.

---

// Server-side Rendering

- 주기적인 update만으로는 충분하지 않고 요청이 들어올 때마다 page를 다시 만들어야 할 때 사용한다.

- page를 동적으로 생성한다.

- build 과정에서는 실행되지 않는다.

- 요청이 들어올 때까지 page 생성이 지연된다.(기다려야 한다.)

- page 컴포넌트에 데이터를 가져와서 추가해야 한다면 page 컴포넌트 파일 안에서 getServerSideProps함수를 export 해야 한다. 

export async function getServerSideProps(context) {
  const req = context.req;
  const res = context.res;

  return {
    props: ,
  };
}

---

import MeetupList from '../components/meetups/MeetupList';

const DUMMY_MEETUPS = [
  {
    id: 'm1',
    title: 'A First Meetup',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Lehesten_2012_x14.JPG/1024px-Lehesten_2012_x14.JPG',
    address: 'Some address 5, 12345 Some City',
    description: 'This is a first meetup!',
  },
  {
    id: 'm2',
    title: 'A Second Meetup',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Lehesten_2012_x14.JPG/1024px-Lehesten_2012_x14.JPG',
    address: 'Some address 10, 12345 Some City',
    description: 'This is a second meetup!',
  },
];

function HomePage(props) {
  return <MeetupList meetups={props.meetups} />;
}

 export async function getServerSideProps(context) {
   const req = context.req;
   const res = context.res;

   return {
     props: { meetups: DUMMY_MEETUPS },
   };
 }

export default HomePage;

---

getStaticProps	getServerSideProps
정적 데이터를 다루며 빠른 로딩 속도와 SEO 최적화가 중요한 경우	동적이고 실시간 데이터가 필요하거나 사용자별 맞춤형 데이터를 표시해야 하는 경우