우와! Next.js의 SSR 삼형제다!!!
getServerSideProps
getServerSideProps란 Next.js에서 제공하는 라이프사이클 메서드 중 하나다. 이 메서드는 서버 사이드 렌더링(SSR)을 위해 사용된다. 기본적으로 브라우저에서 호출되는 일반적인 Next.js 페이지와 달리, getServerSideProps는 페이지 요청이 서버에 도달할 때마다 실행된다. 즉, 페이지를 렌더링하기 전에 데이터를 먼저 가져와서 페이지에 전달해주는 역할을 한다.
getServerSideProps는 서버에서 실행되는 JavaScript 코드를 포함할 수 있으며, 데이터를 fetch()하는 것과 같은 비동기 로직을 처리할 수 있다. 이 메서드는 서버에서만 실행되기 때문에, 클라이언트 측의 API 키와 같은 보안 정보를 노출하지 않도록 조심해야 한다.
다음은 getServerSideProps를 사용하여 데이터를 가져오고, 해당 데이터를 페이지에서 사용하는 간단한 예제이다.
import React from "react";
export default function MyPage({ data }) {
return (
<div>
<h1>My Page</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
export async function getServerSideProps() {
const res = await fetch("https://myapi.com/data");
const data = await res.json();
return {
props: {
data,
},
};
}위 예제에서, getServerSideProps 메서드는 서버에서 데이터를 가져온다. 해당 데이터는 MyPage 컴포넌트의 props로 전달된다.
또한 getServerSideProps는 라우트 정보를 가져오는 params와 query를 인자로 받을 수 있으며, 이를 통해 동적인 페이지를 만들 수 있다.
이렇게 서버에서 데이터를 가져오면, 페이지를 렌더링하기 전에 데이터를 미리 채울 수 있으므로 사용자가 페이지를 볼 때까지 대기 시간을 최소화할 수 있으며, 이를 통해 사용자 경험을 개선하고, 검색 엔진 최적화(SEO)를 향상시킬 수 있다.
getStaticProps
getStaticProps는 Next.js에서 제공하는 pre-rendering(사전 렌더링) 방식 중 하나로, 빌드 시점에서 정적인 데이터를 미리 가져와서 HTML을 생성하는 방법이다. 이를 통해, 빌드한 후에는 서버에서 데이터를 가져올 필요 없이, 정적인 페이지를 빠르게 제공할 수 있다.
export async function getStaticProps() {
const data = await fetchData(); // 데이터 가져오기
return {
props: {
data, // props로 전달할 데이터
},
};
}getStaticProps는 페이지 컴포넌트에서만 사용 가능하다. 해당 페이지 컴포넌트에서 사용할 데이터를 미리 가져오는 함수를 정의해주면 되는데 이 함수는 Next.js에서 정해진 규칙에 따라 정의되어야 한다. 정의된 함수는 서버에서 실행되며, 반환된 데이터는 페이지 컴포넌트의 props로 전달된다.
아래는 getStaticProps를 사용하여 블로그 글 목록 페이지를 구현한 예시다.
import Link from "next/link";
import { getSortedPostsData } from "../lib/posts";
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/posts/${post.id}`}>
<a>{post.title}</a>
</Link>
</li>
))}
</ul>
);
}
export async function getStaticProps() {
const posts = getSortedPostsData();
return {
props: {
posts,
},
};
}해당 코드에서 getStaticProps 함수는 getSortedPostsData 함수를 호출하여 블로그 포스트 데이터를 가져오고, posts라는 props에 해당 데이터를 담아 리턴한다. 리턴된 posts는 Blog 컴포넌트에서 props로 전달되어 map 함수를 이용해 블로그 포스트 목록을 렌더링하게 된다.
주의사항
getStaticProps를 사용하려면 반드시 정적인 데이터를 사용해야 한다. 즉, 요청 시점에 데이터가 변경될 가능성이 없는 경우에만 사용할 수 있다. 이를 통해 빌드 시점에 페이지를 생성하여, 요청 시점에 서버에서 데이터를 가져올 필요 없이, 빠르게 페이지를 제공할 수 있다.
getStaticPaths
getStaticPath는 동적 경로를 가지는 페이지에서 사용된다. 일반적인 동적 페이지 라우팅 시스템과는 달리, Next.js는 미리 생성된 정적 파일을 제공하므로 앱의 성능을 향상시킬 수 있다. 해당 함수를 사용하면 동적 경로를 가지는 페이지의 가능한 경로들을 미리 정의할 수 있으며, 이렇게 하면 미리 빌드된 정적 파일을 생성하여 페이지 로드 시간을 크게 줄일 수 있다는 장점이 있다.
// pages/posts/[id].js
import { getPostData, getAllPostIds } from '../../lib/posts'
export default function Post({ postData }) {
return (
<div>
<h1>{postData.title}</h1>
<br />
<p>{postData.content}</p>
</div>
)
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}위의 예시에서 getAllPostIds 함수는 모든 게시물 ID를 배열로 반환한다. getStaticPaths 함수는 이 배열을 paths 객체의 속성 값으로 사용한다. 이 과정에서 Next.js가 페이지 빌드 시 각 게시물에 대한 정적 파일을 생성하게 된다.
fallback 옵션은 모든 가능한 경로가 미리 정의되지 않은 경우 무엇을 해야 할 지를 결정하는 역할을 하는데, 이 값을 false로 설정하면 정의되지 않은 경로에 대해 404 오류가 반환되고, true로 설정하면 Next.js가 요청을 처리하며 생성된 정적 파일이 없는 경우 요청을 대체하는 동적 페이지를 생성한다.
요약
getServerSideProps: 매 요청 시마다 실행되며 서버에서 데이터를 가져와 페이지를 렌더링. 동적인 데이터를 다룰 때 사용.
getStaticProps: 빌드 시점에 실행되며 데이터를 미리 가져와 정적인 페이지를 생성합. 정적인 페이지를 다룰 때 사용.
getStaticPaths: 빌드 시점에 실행되며 동적인 라우팅을 구현할 때 사용됩. 라우트의 경로를 동적으로 생성 가능.
이 세 가지 함수는 모두 Next.js에서 제공하는 페이지 프리렌더링 기능을 사용하여 페이지의 성능과 SEO 최적화를 개선할 수 있다.
getServerSideProps는 매 요청마다 실행되기 때문에 렌더링 시간이 다소 느릴 수 있지만 항상 최신 데이터를 반영할 수 있다는 장점이 있으며
getStaticProps와 getStaticPaths는 빌드 시점에 실행되기 때문에 렌더링 속도가 빠르고 캐싱이 용이하다는 장점이 있다.
정적인 페이지를 다룰 때는 getStaticProps를 사용하고, 동적인 페이지를 다룰 때는 getServerSideProps를 사용하며, 동적인 라우팅을 구현할 때는 getStaticPaths와 함께 사용한다.
