-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Prerendering overhaul #6392
Prerendering overhaul #6392
Changes from 18 commits
16b29bc
9265fea
23e00b6
707ad87
9d114e8
3fb297e
caaaaa3
bafc4cb
83a49e8
b9be07b
efe0dfb
63ab181
0bdee63
66b155c
e26ed8c
de07484
07a79a6
c20ae6f
64a4c75
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@sveltejs/adapter-static': patch | ||
--- | ||
|
||
[breaking] require all routes to be prerenderable when not using fallback option |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@sveltejs/kit': patch | ||
--- | ||
|
||
[breaking] add `prerender = 'auto'` option, and extend `prerender` option to endpoints |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,22 +32,29 @@ export const hydrate = false; | |
### prerender | ||
|
||
It's likely that at least some pages of your app can be represented as a simple HTML file generated at build time. These pages can be [_prerendered_](/docs/appendix#prerendering). | ||
It's likely that at least some routes of your app can be represented as a simple HTML file generated at build time. These routes can be [_prerendered_](/docs/appendix#prerendering). | ||
|
||
Prerendering happens automatically for any page with the `prerender` annotation: | ||
Prerendering happens automatically for any `+page` or `+server` file with the `prerender` annotation: | ||
|
||
```js | ||
/// file: +page.js/+page.server.js | ||
/// file: +page.js/+page.server.js/+server.js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was confused for a bit because I think "what kind of folder names are these?". Maybe instead There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Skipping this for now, seing that it's like this for all others as well. |
||
export const prerender = true; | ||
``` | ||
|
||
Alternatively, you can set [`config.kit.prerender.default`](/docs/configuration#prerender) to `true` and prerender everything except pages that are explicitly marked as _not_ prerenderable: | ||
|
||
```js | ||
/// file: +page.js/+page.server.js | ||
/// file: +page.js/+page.server.js/+server.js | ||
export const prerender = false; | ||
``` | ||
|
||
Routes with `prerender = true` will be excluded from manifests used for dynamic SSR, making your server (or serverless/edge functions) smaller. In some cases you might want to prerender a route but also include it in the manifest (for example, you want to prerender your most recent/popular content but server-render the long tail) — for these cases, there's a third option, 'auto': | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It took me a little while to understand why this works - why can I prerender AND SSR a route - until I thought "oh yes with |
||
|
||
```js | ||
/// file: +page.js/+page.server.js/+server.js | ||
export const prerender = 'auto'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. now that I've seen the docs and understand what this option does, I'll throw another name into the ring. how about There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think I prefer |
||
``` | ||
|
||
> If your entire app is suitable for prerendering, you can use [`adapter-static`](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), which will output files suitable for use with any static webserver. | ||
The prerenderer will start at the root of your app and generate HTML for any prerenderable pages it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with the `entries` option in the [prerender configuration](/docs/configuration#prerender). | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/** @type {import('./$types').PageLoad} */ | ||
export async function load({ fetch }) { | ||
const res = await fetch('/endpoint/implicit.json'); | ||
return await res.json(); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,7 @@ | ||
<h1>This page was prerendered</h1> | ||
<script> | ||
/** @type {import('./$types').PageData} */ | ||
export let data; | ||
</script> | ||
|
||
<h1>This page was prerendered</h1> | ||
<p>answer: {data.answer}</p> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { json } from '@sveltejs/kit'; | ||
|
||
export const prerender = true; | ||
|
||
/** @type {import('./$types').RequestHandler} */ | ||
export function GET() { | ||
return json({ answer: 42 }); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { json } from '@sveltejs/kit'; | ||
|
||
// no export const prerender here, it should be prerendered by virtue | ||
// of being fetched from a prerendered page | ||
|
||
/** @type {import('./$types').RequestHandler} */ | ||
export function GET() { | ||
return json({ answer: 42 }); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we add
JS
here to clarify that you can't add it to+page.svelte
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was hoping the code sample would make it clear — adding JS muddies the waters a bit in the case where people are using TypeScript
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are some other places where it's
+page/layout
with the.js
ending. We should probably make that consistent, either adding the.js
file always or never (except for when we introduce it).