gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
---
|
|
title: 'prerenderRoutes'
|
|
description: prerenderRoutes hints to Nitro to prerender an additional route.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts
|
|
size: xs
|
|
---
|
|
|
|
When prerendering, you can hint to Nitro to prerender additional paths, even if their URLs do not show up in the HTML of the generated page.
|
|
|
|
::important
|
|
`prerenderRoutes` can only be called within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
|
|
::
|
|
|
|
::note
|
|
`prerenderRoutes` has to be executed during prerendering. If the `prerenderRoutes` is used in dynamic pages/routes which are not prerendered, then it will not be executed.
|
|
::
|
|
|
|
```ts
|
|
const route = useRoute()
|
|
|
|
prerenderRoutes('/')
|
|
prerenderRoutes(['/', '/about'])
|
|
```
|
|
|
|
::note
|
|
In the browser, or if called outside prerendering, `prerenderRoutes` will have no effect.
|
|
::
|
|
|
|
You can even prerender API routes which is particularly useful for full statically generated sites (SSG) because you can then `$fetch` data as if you have an available server!
|
|
|
|
```ts
|
|
prerenderRoutes('/api/content/article/name-of-article')
|
|
|
|
// Somewhere later in App
|
|
const articleContent = await $fetch('/api/content/article/name-of-article', {
|
|
responseType: 'json',
|
|
})
|
|
```
|
|
|
|
::warning
|
|
Prerendered API routes in production may not return the expected response headers, depending on the provider you deploy to. For example, a JSON response might be served with an `application/octet-stream` content type.
|
|
Always manually set `responseType` when fetching prerendered API routes.
|
|
::
|