Next.js 에서 SSR 로 데이터 가져오는 방식들

Data Fetching

🥰 요약

• getStaticProps (SSG) → 빌드 타임에 따라 데이터 가져오기

• getStaticPaths (SSG) → 데이터를 기반으로 페이지를 미리 렌더링 하는 동적 경로지정

• getServerSideProps (SSR) → 각 요청에 따른 데이터 가져오기

getServerSideProps

• 서버에서 바로 데이터를 주고받는 방식

• SEO 유리

• 컴포넌트가 아닌, 페이지 단에서만 사용 가능

• params: 다이나믹 라우트를 사용할 경우, params 는 라우트의 파라미터를 포함하게 된다. 이때 페이지명은 [id].js 이런식으로 대괄호 안에 넣어주고 대괄호 안의 값은 파라미터의 키가 된다.

export async function getServerSideProps(ctx: {
	params: { id: string };
}): Promise<GetServerSidePropsResult<PageProps>> {
	try {
		const houseData = await getHouseDetail(ctx.params.id as string);
		return {
			props: {
				data: houseData,
				uuid: ctx.params.id,
			},
		};
	} catch (err) {
		if (err.response.status === 404) {
			return {
				redirect: {
					permanent: false,
					destination: "/404",
				},
			};
		}
	}
}

• req: The HTTP IncomingMessage object, with an additional cookies prop, which is an object with string keys mapping to string values of cookies.

• res: The HTTP 응답 객체

• query: An object representing the query string, including dynamic route parameters.

export const getServerSideProps = withAuthServerSideProps(async (ctx) => {
	const { id, numOfGuest, startDate, endDate } = ctx.query;
	if (!(id && numOfGuest && startDate && endDate)) {
		return {
			redirect: {
				permanent: false,
				destination: "/404",
			},
		};
	}

	const roomID = id as string;
	const [houseInfo, profile] = await Promise.all([
		getHouseDetail(roomID),
		// getRoomCoupon(roomID),
		getProfile(),
	]);
	return {
		props: { profile, houseInfo, numOfGuest, startDate, endDate, id },
	};
});

• preview: true / false 값에 따라 프리뷰 모드를 지원한다.

• previewData: setPreviewData 에서 설정한 미리보기 데이터.

• resolvedUrl: URL제거하고 원래 쿼리 값을 포함 하는 요청의 정규화된 버전

• locale: 활성 로케일을 포함.

• locales 지원되는 모든 로케일을 포함

• defaultLocale: 구성된 기본 로케일을 포함

• 먼저 데이터가 없는 페이지를 즉시 표시합니다. 페이지의 일부는 정적 생성을 사용하여 미리 렌더링할 수 있습니다. 누락된 데이터에 대한 로드 상태를 표시할 수 있습니다.

• 그런 다음 클라이언트 측에서 데이터를 가져와 준비가 되면 표시합니다.

getStaticProps & getStaticPaths

export const getStaticPaths: GetStaticPaths = async () => {
	const paths = [];
	try {
		const allPosts = await getAllPost({});

		for (let i = 0; i < allPosts.data.length; i++) {
			paths.push({ params: { postTitle: allPosts.data[i]?.attributes.url } });
		}

		return {
			paths,
			fallback: true,
		};
	} catch (error) {
		return {
			paths,
			fallback: false,
		};
	}
};

export const getStaticProps: GetStaticProps = async (context) => {
	const { params } = context;

	try {
		const data = await getPost(params.postTitle as string);
		return {
			props: {
				data,
			},
			revalidate: 1,
		};
	} catch (error: any) {
		return {
			props: {
				error: error,
			},
			redirect: {
				destination: "/blog",
			},
		};
	}
};

export const getStaticPaths: GetStaticPaths = async () => {
	const paths = [];
	try {
		const allActivities = await getActivities("");

		const mockDatasIncluded = [...allActivities, ...activityData];

		for (let i = 0; i < mockDatasIncluded?.length; i++) {
			paths.push({
				params: {
					activityContent: mockDatasIncluded[i]?.id + "",
				},
			});
		}

		return {
			paths,
			fallback: true,
		};
	} catch (error) {
		// console.log(error);
		return {
			paths,
			fallback: true,
		};
	}
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
	const id = String(params.activityContent);

	if (+id >= 10001 && +id <= 10005) {
		const activityDetailData = activityData?.find(
			(activity) => activity?.id === +id,
		);

		return {
			props: {
				activityDetailData: {
					...activityDetailData,
					activityImages: activityDetailData?.activityImages?.map((image) => ({
						location: `${process.env.NEXT_PUBLIC_ACTIVITY_IMAGE_URL + image}`,
					})),
					content: activityDetailData?.desc.reduce((acc, sentence) => {
						const toTagString = `<p>${sentence}</p>`;

						return acc + toTagString;
					}, ""),
				},
			},
		};
	}

	try {
		const activityDetailData = await getActivityDetail(id);
		return {
			props: {
				activityDetailData,
			},
			revalidate: 1,
		};
	} catch (error: any) {
		return {
			redirect: {
				destination: "/activity",
				permanent: false,
			},
			props: {
				error: error,
			},
		};
	}
};

getStaticProps

// javascript + next.js
export async function getStaticProps(context) {
  return {
    props: {}, 
  }
}

// typescript + next.js
import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

• params : 다이나믹 라우트 페이지라면, params를 라우트 파라미터 정보를 가지고 있으며 getStaticPaths 함수와 같이사용한다. → page 명을 [id].js로 설정 후 params : {id : ...}

• preview: preview 모드 여부 >공식문서

• previewData: setPreviewData로 설정된 데이터

• props : 해당 컴포넌트로 리턴할 값

• revalidate : 페이지 재생성이 발생할 수 있는 시간(초). 기본값은 false이며, 이게 거짓이면 다음 빌드때까지 페이지가 빌드된 상태로 캐시됨.

• notFound : Boolean값, 404status를 보내는 것을 허용한다.

// example
// javascript + next.js
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default Blog

// typescript + next.js

import { InferGetStaticPropsType } from 'next'

type Post = {
  author: string
  content: string
}

export const getStaticProps = async () => {
  const res = await fetch('https://.../posts')
  const posts: Post[] = await res.json()

  return {
    props: {
      posts,
    },
  }
}

function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  // will resolve posts to type Post[]
}

export default Blog

getStaticProps 를 사용하는 시점

• 페이지가 검색엔진을 위해 빠른 렌더링이 필요하거나 사용자 요청보다 먼저 페이지 렌더링이 요구될때

• 매번 유저가 요청하는 fetch 에 구애받지 않고 퍼블릭하게 캐시할 수 있는 데이터를 가진 페이지에 유리.

• Headless CMS 로부터 데이터가 올때

getStaticPaths

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } } // See the "paths" section below
    ],
    fallback: true, false, or 'blocking' // See the "fallback" section below
  };
}

paths [필수]

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
} 

fallback [필수]

// typescript + next.js
import { GetStaticProps } from 'next'

interface PostInterface {
  userId: number
  id: number
  title: string
  body: string
}

// 이 페이지에서 렌더될 컴포넌트
function Post({ posts } : { posts:PostInterface }) {
   return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// 빌드될 때 실행
export const getStaticPaths = async () => {
  // posts를 받기 위해 fetch
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // pre-render할 Path를 얻음 (posts를 통해서)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 우리는 오로지 이 path들만 빌드타임에 프리렌더 함
  // { fallback: false } 는 다른 routes들은 404임을 의미
  // true이면 만들어지지 않은 것도 추후 요청이 들어오면 만들어 줄 거라는 뜻
  return { paths, fallback: false }
}

// 빌드될 때 실행
export const getStaticProps = async ({ params }) => {
  // params는 post `id`를 포함하고 있다
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 해당 페이지에 props로 보냄
  return { props: { post } }
}

export default Post

getStaticPaths 를 사용하는 시점

getServerSideProps (server-side-rendering)

• pages/Blog.tsx

// typescript + next.js
import { GetServerSideProps } from 'next'

function Page({ data }) {
  console.log(this.props.data)
 //res.json() 이 찍힌다.
}


export const getServerSideProps: GetServerSideProps = async (context) => {

  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // data 없을 땐 리턴값을 달리함
   if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  //pageProps로 넘길 데이터
  return { props: { data: data } }
}

export default Page

getServerSideProps가 props로 받는 context

• params: 다이나믹 라우트 페이지라면, params를 라우트 파라미터 정보를 가지고 있다.

• req: HTTP request object

• res: HTTP response object

• query: 쿼리스트링

• preview / previewData / setPreviewData로 설정된 데이터

getServerSideProps 리턴 (Optional)

• getServerSideProps는 서버사이드에서만 실행되고, 절대로 브라우저에서 실행되지 않는다.

• getServerSideProps는 매 요청시 마다 실행되고, 그 결과에 따른 값을 props로 넘겨준 뒤 렌더링을 한다.

getServerSideProps / pre-rendering 를 사용하는 시점