Next.js에서는 다양한 렌더링 방법을 제공합니다. 다음은 Next.js에서 사용할 수 있는 주요한 4가지 렌더링 방법입니다
- Static Generation (정적 생성)
- getStaticProps와 함께 사용됩니다.
- 빌드 시점에 페이지를 사전 렌더링하여 정적인 HTML 파일을 생성합니다.
- 최초 접속 시에는 사전 렌더링된 HTML이 제공되고, 이후 클라이언트 측에서는 정적 파일을 재사용합니다.
- 정적 페이지에 적합하며, 자주 변경되지 않는 컨텐츠에 사용됩니다.
- Server-side Rendering (서버 사이드 렌더링)
- getServerSideProps와 함께 사용됩니다.
- 각 요청마다 서버에서 페이지를 렌더링합니다.
- 매 요청마다 데이터를 가져와서 페이지를 동적으로 생성합니다.
- 매번 최신 데이터가 필요하거나 사용자에 따라 다른 컨텐츠가 필요한 경우 사용됩니다.
- Client-side Rendering (클라이언트 사이드 렌더링)
- 초기 렌더링은 정적으로 이루어지고, 이후 클라이언트에서 데이터를 가져와서 동적으로 렌더링합니다.
- useEffect나 componentDidMount와 같은 클라이언트 사이드에서 실행되는 라이프사이클 메서드를 사용하여 데이터를 가져옵니다.
- 매번 최신 데이터가 필요하거나, 페이지 로딩 후에 추가 데이터를 가져와야 할 때 사용됩니다.
- Incremental Static Regeneration (증분적 정적 생성)
- getStaticProps와 함께 revalidate 옵션을 사용합니다.
- 정적으로 생성된 페이지를 사전 렌더링하고, 일정 시간마다 페이지를 다시 생성합니다.
- 이를 통해 사전 렌더링된 페이지를 사용하면서도 정기적으로 업데이트된 데이터를 가져올 수 있습니다.
- 최신 데이터를 필요로하지만 실시간으로 업데이트되지 않아도 되는 경우에 사용됩니다.
이러한 렌더링 방법을 조합하여 Next.js에서 필요한 유연성과 최적의 성능을 달성할 수 있습니다. 선택하는 방법은 프로젝트의 요구 사항과 사용 사례에 따라 달라질 수 있습니다.
* SSG를 통한 페이지 구현
import React from "react";
import { GetStaticProps, NextPage } from "next";
import Head from "next/head";
type SSGProps = {
message: string;
};
const SSG: NextPage<SSGProps> = (props) => {
const { message } = props;
return (
<div>
<div>
<Head>
<title>Static Site Generation</title>
<link rel="icon" href="/favicon.ico"></link>
</Head>
<main>
<p>이 페이지는 정적 사이트 생성 페이지 입니다.</p>
<p>{message}</p>
</main>
</div>
</div>
);
};
export const getStaticProps: GetStaticProps<SSGProps> = async (context) => {
const timestamp = new Date().toLocaleDateString();
const message = `${timestamp}에 getStaticProps가 실행됐씁니다.`;
console.log(message);
return {
props: {
message,
},
};
};
export default SSG;[설명]
getStaticProps 함수는 Next.js에서 사전 렌더링을 위해 사용되는 특수한 함수입니다. 이 함수는 Next.js에서 정적 생성(Static Generation)을 수행하는 동안 호출되며, 데이터를 불러와서 페이지 컴포넌트의 props로 전달합니다.
1. getStaticProps 함수는 async 키워드로 비동기 함수로 정의됩니다. 따라서 함수 내에서 비동기 작업을 수행할 수 있습니다.
2. getStaticProps 함수는 매개변수로 context를 받습니다. context 객체에는 요청에 대한 정보와 라우트 매개변수 등이 포함될 수 있습니다. 이를 활용하여 데이터를 가져오거나 처리할 수 있습니다.
3. getStaticProps 함수 내에서는 필요한 비동기 작업을 수행합니다. 이 예제에서는 현재 날짜와 시간을 가져와서 message 변수에 저장하는 작업을 수행하고 있습니다.
4. getStaticProps 함수는 반환되는 객체의 형태로 데이터를 반환해야 합니다. 예제에서는 message를 props 객체에 포함하여 반환하고 있습니다.
5. 반환된 데이터는 페이지 컴포넌트의 props로 전달됩니다. props 객체 내의 데이터는 해당 페이지 컴포넌트에서 사용할 수 있습니다.
이제 페이지 컴포넌트(SSGPage)에서 getStaticProps 함수가 반환한 데이터를 사용하여 UI를 렌더링할 수 있습니다. 예제에서는 message를 받아와서 화면에 출력하고 있습니다.
* (중요) Next.js는 빌드 시에 getStaticProps 함수를 호출하여 데이터를 가져와서 페이지를 사전 렌더링합니다. 이를 통해 페이지가 최초 접속 시에 미리 생성된 HTML을 제공하고, 초기 로딩 속도를 개선할 수 있습니다.
그러나 주의할 점은 getStaticProps 함수는 빌드 시에 호출되는 것이므로, 빌드 시점에서만 실행되고 런타임 시에는 호출되지 않습니다. 따라서 해당 함수 내에서 외부 API 호출이나 데이터베이스 쿼리 등을 수행하더라도, 해당 코드는 빌드 시에만 실행됩니다.
* getStaticProps는 export 해야 하며 비동기 함수로서 async와 함께 서야 한다. getStaticProps의 인수에는 context가 부여된다. context는 실행 관련 정보가 모인 객체이다.
- params: 경로 파라미터
- locale: 현 로케일 정보
- locales: 지원하는 로케일 배열
- defaultLocale: 기본 로케일 데이터
- preview: Preview Mode 여부
- previwData: Preview Mode에서 setPreviewData에 따라 설정된 데이터
* getStaticProps를 사용한 여러 페이지의 SSG
import React from "react";
import { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";
type PostProps = {
id: string;
};
const Post: NextPage<PostProps> = (props) => {
const { id } = props;
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div>
<Head>
<title>Static Site Generation</title>
<link rel="icon" href="/favicon.ico"></link>
</Head>
<main>
<p>이 페이지는 정적 사이트 생성 페이지 입니다.</p>
<p>{`/posts/${id}에 대응되는 페이지입니다.`}</p>
</main>
</div>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
const paths = [
{
params: {
id: "1",
},
},
{
params: {
id: "2",
},
},
{
params: {
id: "3",
},
},
];
return { paths, fallback: false };
};
interface PostParams extends ParsedUrlQuery {
id: string;
}
export const getStaticProps: GetStaticProps<PostProps, PostParams> = async (
context
) => {
return {
props: {
id: context.params!["id"],
},
};
};
export default Post;
[설명]
getStaticPaths 함수는 동적 경로를 생성하여 반환합니다. 이 경로는 getStaticProps 함수에서 사용될 수 있는 경로 파라미터의 조합입니다.
getStaticProps 함수는 경로 파라미터를 입력으로 받아 해당 경로의 데이터를 가져와 props로 반환합니다.
NextPage 타입을 사용하는 Post 컴포넌트는 getStaticProps에서 반환된 props를 입력으로 받아 해당 데이터를 사용하여 페이지를 렌더링합니다.
따라서, NextPage 타입을 사용하면 getStaticPaths, getStaticProps, 그리고 페이지 컴포넌트 사이의 데이터 흐름을 정확하게 연결하고, 타입 검사를 통해 데이터를 안전하게 다룰 수 있습니다.
후기
간단하게 Next.js를 복습해봤다. 옛날에 학습했지만,
실무를 하는 동안 이미 Next.js는 구현되어 있는 보일러플레이트를 많이 이용했고,
그렇기 까먹은 개념이 많아 다시 한 번 정리하는 과정을 거쳤다.
나머지는 천천히 정리할 예정이다.
'React 실습 > Nextjs 실습' 카테고리의 다른 글
| [Next.js] SSR, ISR 그리고 Link, Image (0) | 2023.07.04 |
|---|---|
| [Next.js] 4장 - 코드 구성과 데이터 불러오기 (0) | 2023.05.07 |
