Next.js Sever Side Rendering을 위한 함수 | pages router

Next.js에서 서버 사이드 렌더링을 위한 함수를 공식문서에서 한번 흝어보았다. 또한, 각각 함수에 따른 내 블로그 프로젝트에 적용한 예시도 첨부하였다.  

 

서버 사이드 렌더링이 궁금하다면? 아래 링크 참고

서버 사이드 렌더링이란? | with Next.js

 

1. getStaticPaths와 getStaticProps

 블로그, 게시판과 같이 사용자와 관계없이 정적인 페이지에 유용하고 반드시 함께 사용해야 작동한다.

언제 사용해야 할까?

SEO를 위해서 미리 렌더링이 되어야하고 빨라야 할 때
페이지를 렌더링하는데 필요한 데이터가 사용자의 요청 전에 빌드해도 될 때

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "blocking"
  }
}) satisfies GetStaticPaths
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {

	// fallback = true인 경우, 
	if(router.isFallback){
		return <div>Loading...</div>
	}
	
  return repo.stargazers_count
}

fallback 옵션 파헤치기

- false: 위 paths.params에 담긴 주소만 접근 가능

- true: 위 paths.params에 미리 빌드할 몇 개의 페이지만 리스트로 반환, 그 외의 페이지에 접근할 경우, 빌드 전까지는 위의 로딩 컴포넌트 노출

- blocking: 별도의 로딩 처리를 하지 않고, 단순히 빌드가 완료될 때까지 사용자를 기다리게 하는 옵션

 

실제 사용 예시

첫번째, getStaticProps만 사용

-> 메인 페이지가 렌더링되기전에 regions의 정보가 필요하기 때문에 미리 서버에서 받아놓는다. 

// /pages/main

export const getStaticProps = (async () => {
	const regions = await SantiagoGet<Regions>("regions");
	regionStore.setState({ regionList: regions.data });

	return {
		props: {
			regions,
		},
	};
}) satisfies GetStaticProps<{
	regions: Regions;
}>;

 

두번째, getStaticProps 와 getStaticPaths

-> 포스팅 된 데이터가 많을 것이라 예상하고 fallback옵션을 true로 한 뒤, 미리 한 개의 데이터만 path.params에 담아 놓고 지속적으로 불러오도록 해두었다. 그리고 router.isFallback을 통해 쉽게 로딩 컴포넌트를 보여줄 수 있었다. 

// /pages/post/[id]/index.tsx ui
export default function PostPage({
	post,
}: InferGetStaticPropsType<typeof getStaticProps>) {
	const router = useRouter();
	if (router.isFallback) {
		return <p>Loading...</p>;
        
    return()
}

(...)

export const getStaticPaths: GetStaticPaths = async () => {
	return {
		paths: [{ params: { id: "2cb781b8-f545-403f-a8bb-b9062ee112be" } }],
		fallback: true,
	};
};

export const getStaticProps: GetStaticProps = (async (context) => {
	const { params } = context;
	const magazineId = params?.id;
	const post = await SantiagoGet<IMagazine>(`magazines/${magazineId}`);
	if (!post) {
		return { notFound: true };
	}
	return {
		props: {
			post,
		},
	};
}) satisfies GetStaticProps<{
	post: IMagazine;
}>;

 

 

2. getServerSideProps

페이지 진입 전에 무조건 이 함수 먼저 실행, 서버에서만 실행됨
props를 반환하거나 다른 페이지로 리다이렉트 가능
window, document같은 브라우저 객체에는 접근 불가능
반드시 완전한 주소를 제공해야 fetch 가능
에러시, 500.tsx 같이 미리 정의해 둔 에러 페이지로 리다이렉트됨
client에서 redirect하는 것보다 훨씬 자연스러움

 

(아직 작성중입니다.)