Prefetching
Prefetching allows pages and their requested data to be cached in advance.
More info here: Prefetch and caching - draft
Prefetching with javascript
<script>
import { prefetch } from '@roxi/routify'
prefetch('/some/path')
</script> <script>
import { prefetch } from '@roxi/routify'
prefetch('/some/path')
</script>prefetch and cache for 24 hours
Option A
prefetch('/some/path', { validFor: 60 * 24 })
prefetch('/some/path', { validFor: 60 * 24 })Option B
<a use:prefetch={{ validFor: 60 * 24 }}>Page with data</a> <a use:prefetch={{ validFor: 60 * 24 }}>Page with data</a>Option C
fetch('//myapi.com/data', {headers: { 'x-routify-valid-for': 60 * 24 }}) fetch('//myapi.com/data', {headers: { 'x-routify-valid-for': 60 * 24 }})Options set through request headers take precedence over prefetch options.
Batch prefetching
Global prefetching
<script>
import { prefetch } from '@roxi/routify'
import { routes } from '@roxi/routify/tmp/routes'
routes
.map(route => route.api)
.filter(node => node.meta.iWantTheseFetched) //optional filtering
.forEach(node => prefetch(node.path))
</script>
<script>
import { prefetch } from '@roxi/routify'
import { routes } from '@roxi/routify/tmp/routes'
routes
.map(route => route.api)
.filter(node => node.meta.iWantTheseFetched) //optional filtering
.forEach(node => prefetch(node.path))
</script>Prefetching URLs on a page
<script>
import { layout } from '@roxi/routify'
$: nodes = $layout.children
$: nodes
.filter(node => node.meta.iWantTheseFetched) //optional filtering
.forEach(node => prefetch(node.path))
</script>
{#each nodes as node}
<a href={node.path}>{node.title}</a>
{/each}
<script>
import { layout } from '@roxi/routify'
$: nodes = $layout.children
$: nodes
.filter(node => node.meta.iWantTheseFetched) //optional filtering
.forEach(node => prefetch(node.path))
</script>
{#each nodes as node}
<a href={node.path}>{node.title}</a>
{/each}Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.