프리렌더링
Nuxt는 특정 성능 또는 SEO 메트릭을 개선하기 위해 페이지를 빌드 시 정적으로 렌더링할 수 있습니다.
Nuxt는 애플리케이션의 선택된 페이지를 빌드 시 렌더링할 수 있습니다. Nuxt는 요청 시 즉석에서 생성하는 대신 미리 빌드된 페이지를 제공합니다.
이것도 참고 Nuxt 렌더링 모드크롤 기반 프리렌더링
nuxt generate 명령어를 사용하여 Nitro 크롤러를 통해 애플리케이션을 빌드하고 프리렌더링합니다. 이 명령어는 nitro.static 옵션이 true로 설정된 nuxt build와 유사하거나 nuxt build --prerender를 실행하는 것과 유사합니다.
이 명령어는 사이트를 빌드하고, nuxt 인스턴스를 실행하며, 기본적으로 루트 페이지 /와 사이트의 다른 페이지들을 프리렌더링합니다.
npx nuxt generate
이제 .output/public 디렉토리를 어떤 정적 호스팅 서비스에 배포하거나 npx serve .output/public로 로컬에서 미리보기할 수 있습니다.
Nitro 크롤러의 작동 방식:
- 애플리케이션의 루트 경로(
/),~/pages디렉토리의 비동적 페이지, 그리고nitro.prerender.routes배열의 다른 경로의 HTML을 로드합니다. - HTML과
payload.json을~/.output/public/디렉토리에 저장하여 정적으로 제공됩니다. - HTML에서 다른 경로로 이동하는 모든 앵커 태그(
<a href="...">)를 찾습니다. - 더 이상 크롤링할 앵커 태그가 없을 때까지 발견된 각 앵커 태그에 대해 1-3단계를 반복합니다.
발견 가능한 페이지에 연결되지 않은 페이지는 자동으로 프리렌더링할 수 없기 때문에 이를 이해하는 것이 중요합니다.
이것도 참고 api > commands > generate#nuxt-generate선택적 프리렌더링
빌드 중 Nitro가 가져와서 프리렌더링할 경로를 수동으로 지정하거나 nuxt.config 파일에서 /dynamic과 같은 프리렌더링하지 않을 경로를 무시할 수 있습니다:
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ["/user/1", "/user/2"],
ignore: ["/dynamic"],
},
},
});
크롤러가 발견할 수 없는 /sitemap.xml 또는 /robots.txt와 같은 경로 집합을 프리렌더링하기 위해 crawlLinks 옵션과 결합할 수 있습니다:
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: ["/sitemap.xml", "/robots.txt"],
},
},
});
nitro.prerender를 true로 설정하는 것은 nitro.prerender.crawlLinks를 true로 설정하는 것과 유사합니다.
마지막으로, routeRules를 사용하여 수동으로 구성할 수 있습니다.
export default defineNuxtConfig({
routeRules: {
// 프리렌더링하도록 설정
"/rss.xml": { prerender: true },
// 프리렌더링에서 제외하도록 설정
"/this-DOES-NOT-get-prerendered": { prerender: false },
// 다른 페이지에서 링크된 경우 /blog 아래의 모든 것이 프리렌더링됩니다.
"/blog/**": { prerender: true },
},
});
약식으로, defineRouteRules를 사용하여 페이지 파일에서 이를 구성할 수도 있습니다.
<script setup>
// 또는 페이지 수준에서 설정
defineRouteRules({
prerender: true,
});
</script>
<template>
<div>
<h1>홈페이지</h1>
<p>빌드 시 프리렌더링됨</p>
</div>
</template>
이는 다음과 같이 변환됩니다:
export default defineNuxtConfig({
routeRules: {
"/": { prerender: true },
},
});
런타임 프리렌더 구성
prerenderRoutes
Nuxxt 컨텍스트 내에서 런타임에 이를 사용하여 Nitro가 프리렌더링할 경로를 추가할 수 있습니다.
<script setup>
prerenderRoutes(["/some/other/url"]);
prerenderRoutes("/api/content/article/my-article");
</script>
<template>
<div>
<h1>프리렌더링 시 다른 경로를 등록합니다</h1>
</div>
</template>
prerender:routes Nuxt 훅
추가 경로를 등록하기 위해 프리렌더링 전에 호출됩니다.
export default defineNuxtConfig({
hooks: {
async "prerender:routes"(ctx) {
const { pages } = await fetch("https://api.some-cms.com/pages").then(
(res) => res.json(),
);
for (const page of pages) {
ctx.routes.add(`/${page.name}`);
}
},
},
});
prerender:generate Nitro 훅
프리렌더링 중 각 경로에 대해 호출됩니다. 프리렌더링되는 각 경로를 세밀하게 처리하는 데 사용할 수 있습니다.
export default defineNuxtConfig({
nitro: {
hooks: {
"prerender:generate"(route) {
if (route.route?.includes("private")) {
route.skip = true;
}
},
},
},
});
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/getting-started/prerendering