sveltejs / sveltejs/kit

Data preloading expiration and opt-in/out per route

Open
#13,722 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

Data preloading is often enabled site-wide by including data-sveltekit-preload-data="hover" in app.html. This can then be disabled/enabled per-section/link, which is not ideal. Also, I am not quite sure if preloaded data ever expires.

I have a data-intensive dashboard page, on which data can get outdated quite fast (a few minutes), so I don't want pre-loading on it. This is linked in multiple places, so I had to manually add data-sveltekit-preload-data="none" on every link to this page, making sure not to forget any, also remembering to disable preloading if I later add another link to this page.

The main issue, however, is that, once hovered and the data is loaded, it never seems to expire. So, if you use the default preload-on-hover behaviour, and you follow these steps:

  1. Hover a link
  2. Wait 5 minutes doing other stuff on the current page
  3. Go to the link

The data will be outdated (from 5 minutes ago).

Describe the proposed solution

Some pages don't do well with preloading, but this is per-page, not per-link. It makes more sense to say "this page can get outdated fast" rather to specify per-link (why would a link to page X need preloading but a different link to the same page X not need it?). There should be a export const dataPreload = false in +page.ts to prevent data preloading for a specific page.

As for the main issue, there should be a way to tell SvelteKit to not hold onto preloaded data for too long.

Importance

nice to have

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the site-wide setting in app.html, the proposed +page.ts export, and links using data-sveltekit-preload-data. Determine how per-page opt-out and expiration should behave for preloaded data, then verify the hover, wait, and navigation scenario described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.