Next.js 렌더링 방법과 캐싱 기능
사이트 배포 준비
Next.js 프로젝트를 배포하려면, 우선 터미널에 다음 명령어를 입력하여 프로젝트를 빌드해야 합니다
- npx next build
이 명령어는 Next.js 코드베이스를 HTML, JS, CSS 파일들로 변환해 줍니다. 빌드가 완료되면 .next 디렉토리에 새로운 파일들이 생성됩니다.
빌드가 성공하면 터미널에 다음과 같은 출력이 나타납니다:
┌ ƒ / 301 B 78.5 kB
├ /_app 0 B 78.2 kB
├ ○ /404 180 B 78.4 kB
├ ƒ /api/hello 0 B 78.2 kB
├ ƒ /api/post/edit 0 B 78.2 kB
├ ƒ /api/test 0 B 78.2 kB
├ ƒ /detail/[id] 575 B 81.3 kB
├ ƒ /edit/[id] 600 B 78.8 kB
├ ƒ /list 614 B 81.3 kB
├ ○ /list/DetailLink 330 B 78.6 kB
├ ○ /list/ListItem 571 B 81.3 kB
└ ○ /write 574 B 78.8 kB
+ First Load JS shared by all 78.7 kB
├ chunks/framework-ecc4130bc7a58a64.js 45.2 kB
├ chunks/main-48a2be0192cdda09.js 32 kB
└ other shared chunks (total) 1.46 kB출력 결과에서
○는 해당 페이지가 static rendering(정적 렌더링)됨을 나타냅니다.
ƒ는 해당 페이지가 dynamic rendering(동적 렌더링)됨을 나타냅니다.
기본적으로 모든 페이지는 정적 렌더링이 기본값으로 설정됩니다.
렌더링 방식 변경
가끔 동적 렌더링이 필요한 페이지가 정적 렌더링으로 설정될 때가 있습니다. 예를 들어, /list/ListItem 페이지를 동적 렌더링으로 변경하려면, 페이지 내에 다음과 같은 변수를 추가하면 됩니다:
"use client";
import Link from "next/link";
// 동적 렌더링을 강제하는 변수
export const dynamic = 'force-dynamic';
export default function ListItem({ result }) {
console.log(result);
// result가 정의되지 않거나 배열이 아니면 오류 메시지를 반환합니다.
if (!result || !Array.isArray(result)) {
console.log("No items found or result is not an array");
return <div>No items found</div>;
}
return (
// 페이지 내용 ...
);
}이 변수를 추가한 후 npx next build를 다시 실행하면 해당 페이지의 렌더링 방식이 변경됩니다.
캐싱
캐싱은 특정 데이터를 잠시 저장해 두고 재사용하는 방식입니다. 이를 통해 서버의 부하를 줄일 수 있습니다.
페이지 캐싱
GET 요청 결과 캐싱
export default async function Home(){
// 이렇게 작성하면 데이터가 캐싱됩니다.
await fetch("URL", { cache: "force-cache" });
}
// 실시간 데이터가 중요할 때 (매번 서버로부터 최신 데이터를 가져옵니다.)
await fetch("URL", { cache: "no-store" });
// 60초마다 캐싱된 데이터 갱신 (서버 자원을 절약하면서도 일정 시간마다 최신 데이터를 가져올 수 있습니다.)
await fetch("URL", { next: { revalidate: 60 } });DB 출력 결과 캐싱
Next.js에서 getStaticProps와 revalidate를 사용하여 데이터베이스 쿼리 결과를 캐싱할 수 있습니다. 이렇게 하면 서버 부하를 줄이고, 페이지 로딩 속도를 개선할 수 있습니다.
import connectDB from "@/utill/database";
export async function getStaticProps() {
const db = (await connectDB).db("forum");
let result = await db.collection("post").find().toArray();
return {
props: {
result: JSON.parse(JSON.stringify(result)),
},
revalidate: 60, // 페이지를 60초마다 재생성하여 최신 데이터 반영
};
}
export default function Home({ result }) {
return (
<div>
<h1>Data from MongoDB</h1>
</div>
);
}
- getStaticProps: 빌드 시점에 데이터베이스에서 데이터를 가져와 정적 페이지를 생성합니다.
- revalidate: 60: 페이지를 60초마다 재생성하여 최신 데이터를 반영합니다.
이렇게 하면 페이지가 초기 로드될 때 빠르게 로딩되고, 일정 주기마다 최신 데이터로 갱신됩니다.
FE