프리렌더링

Nuxt는 특정 성능 또는 SEO 지표를 개선하기 위해 빌드 시점에 페이지를 정적으로 렌더링할 수 있습니다

Nuxt를 사용하면 애플리케이션의 선택된 페이지를 빌드 시점에 렌더링할 수 있습니다. Nuxt는 요청 시 페이지를 즉석에서 생성하는 대신 미리 빌드된 페이지를 제공합니다.

Read more in Nuxt 렌더링 모드.

크롤 기반 프리렌더링

nuxt generate 명령을 사용하여 Nitro 크롤러로 애플리케이션을 빌드하고 프리렌더링할 수 있습니다. 이 명령은 nitro.static 옵션을 true로 설정한 nuxt build 또는 nuxt build --prerender를 실행하는 것과 유사합니다.

이 명령은 사이트를 빌드하고 Nuxt 인스턴스를 실행한 다음, 기본적으로 루트 페이지 /와 그 페이지가 링크하는 사이트의 모든 페이지, 그리고 그 페이지들이 링크하는 모든 페이지 등을 프리렌더링합니다.

npx nuxt generate

이제 .output/public 디렉터리를 어떤 정적 호스팅 서비스에도 배포할 수 있으며, npx serve .output/public으로 로컬에서 미리보기할 수 있습니다.

Nitro 크롤러의 동작 방식:

  1. 애플리케이션의 루트 라우트(/), ~/pages 디렉터리의 모든 비동적 페이지, 그리고 nitro.prerender.routes 배열에 있는 기타 라우트의 HTML을 로드합니다.
  2. HTML과 payload.json을 정적으로 제공하기 위해 ~/.output/public/ 디렉터리에 저장합니다.
  3. HTML에서 다른 라우트로 이동하기 위한 모든 앵커 태그(<a href="...">)를 찾습니다.
  4. 더 이상 크롤링할 앵커 태그가 없을 때까지 발견된 각 앵커 태그에 대해 1-3 단계를 반복합니다.

발견 가능한 페이지에 링크되지 않은 페이지는 자동으로 프리렌더링될 수 없기 때문에 이 점을 이해하는 것이 중요합니다.

nuxt generate 명령에 대해 더 알아보세요.

선택적 프리렌더링

빌드 중에 Nitro가 가져와서 프리렌더링할 라우트를 수동으로 지정하거나, nuxt.config 파일에서 /dynamic과 같이 프리렌더링하지 않으려는 라우트를 무시하도록 설정할 수 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2'],
      ignore: ['/dynamic'],
    },
  },
})

이를 crawlLinks 옵션과 결합하여 크롤러가 발견할 수 없는 /sitemap.xml 또는 /robots.txt와 같은 라우트 집합을 프리렌더링할 수 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/robots.txt'],
    },
  },
})

nitro.prerender를 true로 설정하는 것은 nitro.prerender.crawlLinks를 true로 설정하는 것과 유사합니다.

Nitro 문서에서 프리렌더링에 대해 더 알아보세요.

마지막으로, routeRules를 사용하여 이를 수동으로 구성할 수 있습니다.

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // prerender를 true로 설정하면 프리렌더링되도록 구성합니다
    '/rss.xml': { prerender: true },
    // false로 설정하면 프리렌더링에서 건너뛰도록 구성합니다
    '/this-DOES-NOT-get-prerendered': { prerender: false },
    // /blog 아래의 모든 것은 다른 페이지에서 링크만 되어 있다면
    // 프리렌더링됩니다
    '/blog/**': { prerender: true },
  },
})
Nitro의 routeRules 구성에 대해 더 알아보세요.

축약형으로, 페이지 파일에서 defineRouteRules를 사용하여 이를 구성할 수도 있습니다.

이 기능은 실험적이며, 사용하려면 nuxt.config에서 experimental.inlineRouteRules 옵션을 활성화해야 합니다.
app/pages/index.vue
<script setup>
// 또는 페이지 레벨에서 설정
defineRouteRules({
  prerender: true,
})
</script>

<template>
  <div>
    <h1>Homepage</h1>
    <p>빌드 시점에 프리렌더링됨</p>
  </div>
</template>

이는 다음과 같이 변환됩니다:

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
  },
})

런타임 프리렌더 구성

prerenderRoutes

Nuxt 컨텍스트 내에서 런타임에 이를 사용하여 Nitro가 프리렌더링할 라우트를 추가할 수 있습니다.

app/pages/index.vue
<script setup>
prerenderRoutes(['/some/other/url'])
prerenderRoutes('/api/content/article/my-article')
</script>

<template>
  <div>
    <h1>프리렌더링 시 다른 라우트를 프리렌더링 대상으로 등록합니다</h1>
  </div>
</template>
Read more in prerenderRoutes.

prerender:routes Nuxt 훅

이는 추가 라우트가 등록되도록 프리렌더링 전에 호출됩니다.

nuxt.config.ts
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 훅

이는 프리렌더링 중 각 라우트마다 호출됩니다. 프리렌더링되는 각 라우트를 세밀하게 처리하는 데 사용할 수 있습니다.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    hooks: {
      'prerender:generate' (route) {
        if (route.route?.includes('private')) {
          route.skip = true
        }
      },
    },
  },
})