1. getServerSideProps

Next.js에서 제공하는 SSR(Server-Side-Rendering)을 위한 데이터 페칭 함수입니다.

getServerSideProps는 서버에서만 실행되며, 페이지를 렌더링하는 시점 매 요청마다 호출되며,

동적으로 자주 변경되는 페이지를 구성하는데 적합니다.

getServerSideProps 사용방법

getServerSideProps를 아래 형식으로 선언합니다.

export async function getServerSideProps() {
  //...
}

getServerSideProps는 pages 디렉토리 안에서만 선언 가능합니다.

getServerSideProps 함수는 비동기로 동작하며, 반환 값으로 객체를 가지는 Promise를 반환해야 합니다. 반환된 객체는 props 키를 통해 ****구성된 페이지 컴포넌트로 전달됩니다.

export default function MyComponent({ posts }) {
	return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getServerSideProps() {
  const response = await fetch("<https://jsonplaceholder.typicode.com/posts>");
  const posts = await response.json();

	return {
		props : posts
  }
}	

notFound true 옵션을 반환하면 404 페이지가 표시되게 됩니다.

이를 이용하여 데이터 없는 경우 notFound 페이지가 반환되도록 처리할 수 있습니다.

export default function MyComponent({ posts }) {
	return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getServerSideProps() {
  const response = await fetch("<https://jsonplaceholder.typicode.com/posts>");
  const posts = await response.json();

	if(!posts) {
		return {
      notFound : true
    }
	}

	return {
		props : posts
  }
}	

redirect 옵션을 통해 redirect 처리도 가능합니다.