오늘 한 일

nextjs 공부

오늘 공부한 내용

✅ nextJs 사전 렌더링 - 정적생성

• npm run build 때 생성됨
• 서버에 요청이 전송되자마자 페이지가 사전 렌더링 되는 것이 아니라 build할 때 이루어짐
  (=배포가 끝나면 사전 렌더링 페이지에 아무런 변화가 일어나지 않음
  => 이후 업데이트를 반영하고 싶으면 다시 빌드해야 함)
• 귀찮다고 생각될 수 있지만 대부분의 애플리케이션이 페이지는 크게 변경되지 않으며 콘텐츠도 딱히 변화가 없음

• 하지만 이 때 pages 컴포넌트에 데이터 페칭 작업을 추가하여 데이터를 기다린다면 pages 컴포넌트에 특수한 함수를 내보내줘야 함 => ✨ getStaticProps ✨

getStaticProps

• 주의 : 다른 컴포넌트 파일이 아닌 pages 컴포넌트 파일에서만 작동, 이름변경 불가
• nextJs가 사전 렌더링 프로세스 중 바로 컴포넌트 함수를 호출해서 jsx를 html 콘텐츠로 사용하는 것이 아니라 getStaticProps 함수를 먼저 호출함
• async를 사용으로 promise를 반환해서 유용 (=기다렸다가 실행)
• 서버에서만 실행할 수 있는 모든 코드를 실행할 수 있음
  (파일 시스템에 접근, 데이터베이스 연결 등)
• 이 안에서 작성하는 모든 코드는 클라이언트 사이드로 가지 않음
  (=빌드 프로세스 중에만 실행되는 코드)
• 단, 필요한 데이터를 가져온 후에는 항상 객체를 반환하도록 설정해야 함
• 객체에서 여러가지를 구성할 수 있지만 가장 중요한 프로퍼티는 바로 props
  (이름이 반드시 props여야 함)
• 이 props가 컴포넌트에서 받는 데이터

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

const DUMMY_MEETUPS = [
  {
    id: 'm1',
    title: 'A First Meetup',
    image:
      'https://upload.wikimedia.org/wikipedia/commons/d/d3/Stadtbild_M%C3%BCnchen.jpg',
    address: 'Some address 5, 12345 Some City',
    description: 'This is a first meetup',
  },
  // ...
];

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

export const getStaticProps = async () => {
  return {
    props: {
      meetups: DUMMY_MEETUPS,
    },
  };
};

export default HomePage;

getStaticProps 사용시 발생할 수 있는 문제

• 데이터가 오래된 경우 : 빌드시에 만들어지기 때문에 빌드 후 데이터를 추가해도 페이지에 반영되지 않음 => ✨ revalidate ✨

revalidate

• getStaticProps로부터 반환된 객체에 이 프로퍼티를 추가하여 사용
• 설정된 숫자만큼 빌드 프로세스 중 대기한 뒤 페이지가 생성됨
• 설정한 시간이 지날 때마다 요청이 있다면 서버에 해당 페이지를 생성
• 이렇게 재생성된 페이지가 사전생성된 페이지를 대체함
• 어떤 숫자를 설정하든 배포 후 서버에서 다시 생성됨
  (데이터가 변했다고 재배포를 하거나 다시 빌드할 필요 없음)

export const getStaticProps = async () => {
  return {
    props: {
      meetups: DUMMY_MEETUPS,
    },
    revalidate: 10
  };
};