You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -228,6 +230,9 @@ We can create a layout that only applies to pages below `/settings` (while inher
228
230
{@render children()}
229
231
```
230
232
233
+
> [!LEGACY]
234
+
> `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\$types).
235
+
231
236
You can see how `data` is populated by looking at the `+layout.js` example in the next section just below.
232
237
233
238
By default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you.
@@ -256,7 +261,7 @@ Data returned from a layout's `load` function is also available to all its child
Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
391
396
392
-
For example, annotating `let { data } =$props()` with `PageData` (or `LayoutData`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
397
+
For example, annotating `let { data } =$props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:
> The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page:
In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.
403
425
404
426
If you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.
Data returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.
@@ -121,7 +121,7 @@ However, they will have no effect on responses dynamically rendered by SvelteKit
121
121
122
122
### Further reading
123
123
124
-
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site).
124
+
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site).
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md
+34-12
Original file line number
Diff line number
Diff line change
@@ -92,6 +92,8 @@ export default {
92
92
93
93
Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.
94
94
95
+
> Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits
96
+
95
97
To add ISR to a route, include the `isr` property in your `config` object:
96
98
97
99
```js
@@ -100,24 +102,44 @@ import { BYPASS_TOKEN } from '$env/static/private';
100
102
101
103
exportconstconfig= {
102
104
isr: {
103
-
// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
104
-
// Setting the value to `false` means it will never expire.
105
105
expiration:60,
106
-
107
-
// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
108
-
// with a __prerender_bypass=<token> cookie.
109
-
//
110
-
// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
111
106
bypassToken:BYPASS_TOKEN,
112
-
113
-
// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
114
-
// ensuring that they do not result in content being regenerated unnecessarily
115
107
allowQuery: ['search']
116
108
}
117
109
};
118
110
```
119
111
120
-
The `expiration` property is required; all others are optional.
112
+
> Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time
113
+
114
+
The `expiration` property is required; all others are optional. The properties are discussed in more detail below.
115
+
116
+
### expiration
117
+
118
+
The expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand.
119
+
120
+
### bypassToken
121
+
122
+
A random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=<token>` cookie.
123
+
124
+
Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
125
+
126
+
Note that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:
127
+
128
+
```console
129
+
btoa(Math.random().toString()).substring(0,32);
130
+
```
131
+
132
+
Set this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For "Key" put `BYPASS_TOKEN` and for "value" use the string generated above, then hit "Save".
133
+
134
+
To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:
135
+
136
+
```console
137
+
$ vercel env pull .env.development.local
138
+
```
139
+
140
+
### allowQuery
141
+
142
+
A list of valid query parameters that contribute to the cache key. Other parameters (such as utm tracking codes) will be ignored, ensuring that they do not result in content being re-generated unnecessarily. By default, query parameters are ignored.
121
143
122
144
> Pages that are [prerendered](page-options#prerender) will ignore ISR configuration.
If unimplemented, defaults to `({ event, resolve }) => resolve(event)`.
42
42
43
+
During prerendering, SvelteKit crawls your pages for links and renders each route it finds. Rendering the route invokes the `handle` function (and all other route dependencies, like `load`). If you need to exclude some code from running during this phase, check that the app is not [`building`]($app-environment#building) beforehand.
44
+
43
45
### locals
44
46
45
47
To add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.
0 commit comments