content: Expand notes on preloading data #1306

atilafassina · 2025-10-18T16:20:04Z

Let's expand on how preload works in Solid-Router within or outside a SolidStart app.

Clarify why usePreloadroute exists if that's the default behavior
Clarify the advanced usage with deeply nested Lazy components
Clarify the mechanics/heuristics of how the Router decides to preload/prefetch components and data

bolt-new-by-stackblitz · 2025-10-18T16:20:06Z

Run & review this pull request in StackBlitz Codeflow.

netlify · 2025-10-18T16:20:09Z

✅ Deploy Preview for solid-docs ready!

Name	Link
🔨 Latest commit	`203df8d`
🔍 Latest deploy log	https://app.netlify.com/projects/solid-docs/deploys/68f783876e02db00083b15a7
😎 Deploy Preview	https://deploy-preview-1306--solid-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull Request Overview

This PR expands the documentation on data preloading in Solid Router, explaining how preloading works both within and outside SolidStart applications. It provides clarity on when and why to use manual preloading versus automatic preloading behavior.

Added comprehensive documentation on automatic vs manual preloading behaviors
Enhanced API documentation for usePreloadRoute with detailed type signatures
Clarified preloading mechanics with user actions and timing heuristics

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
`use-preload-route.mdx`	Enhanced with usage examples, type signatures, and parameter documentation
`preloading.mdx`	New comprehensive guide on preloading concepts and advanced usage patterns
`data.json`	Added preloading guide to advanced concepts navigation
`routing-and-navigation.mdx`	Minor formatting improvements to code blocks with titles

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/routes/solid-router/reference/primitives/use-preload-route.mdx

src/routes/solid-router/advanced-concepts/preloading.mdx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…ence

Copilot

Pull Request Overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/routes/reference/component-apis/lazy.mdx

src/routes/solid-router/advanced-concepts/preloading.mdx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

LadyBluenotes · 2025-10-20T20:39:27Z

src/routes/solid-router/advanced-concepts/preloading.mdx

+When on a [SolidStart](/solid-start) application, this function can also run on the server during the initial page load to start fetching data before rendering. When in a Single-Page Application (SPA), it will load the route's component and its `preload` function when the user hovers or focuses on a link.
+
+| user action | route behavior |
+| ----------- | -------------------------------------- |
+| hover | with a 300ms delay to avoid excessive preloading |
+| focus | immediately |


I think the SolidStart section might be more appropriate in the reference section as a callout so it doesn't get buried here.

Following that change, I also believe it might be better to show a basic code snippet of what the hover would look like. Doesn't have to be too complex, just enough to get the idea across for how it should look.

the code snippet is in the respective API references. This entry is to explain conceptually how preloading works in Solid Router. I added links to the the APIs so things didn't get too repetitive

Not sure what you mean about the hover snippet, that's just the browser API, there's no code from the user to manage or handle that. If they hover or focus the anchor tag, preloading will happen.

Remember: preloading is default behavior. Altering it is an advanced concept for users, most cases we want people to feel it "just works".

I think as it stands for me it feels more like an extension of the ref page vs an exposure to the concept as a whole. What I meant by the hover example was that it might make it feel less like a ref page if there is some form of an example on the page of what it'd look like to modify it.

My explanation wasn't entirely great (I'm sorry about that) but I'll try to give you a bit more of an idea as to what I mean tomorrow (unless @devagrawal09 has any ideas before then).

mangs

Nice updates here! After all the really generous time you all spent helping me on Discord, I figured the least I could do was return the favor. Curious of your thoughts.

mangs · 2025-10-23T03:50:04Z

src/routes/reference/component-apis/lazy.mdx


-```ts
+Used to lazy load components to allow for code splitting. 
+Components are not loaded until rendered. 


Suggested change

Components are not loaded until rendered.

Components are not loaded until rendered or manually preloaded.

mangs · 2025-10-23T03:52:40Z

src/routes/reference/component-apis/lazy.mdx

+## Preloading data in Nested Lazy Components
+
+Top-level lazy components will automatically be preloaded as well as their preload functions.
+Though nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.


Suggested change

Though nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.

However, nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.

mangs · 2025-10-23T03:53:10Z

src/routes/reference/component-apis/lazy.mdx

+
+Top-level lazy components will automatically be preloaded as well as their preload functions.
+Though nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.
+To preload such components, you can use the `preload` method exposed on the lazy component


Suggested change

To preload such components, you can use the `preload` method exposed on the lazy component

To preload such components, you can use the `preload` method exposed on the lazy component.

mangs · 2025-10-23T03:56:32Z

src/routes/reference/component-apis/lazy.mdx

+
+ return (
+<div>
+ <button onClick={handlePreload}>Preload Nested Component</button>


By the time the button is visible and before it's able to be clicked, <Nested /> is loaded and rendered already no?

mangs · 2025-10-23T04:07:03Z

src/routes/solid-router/advanced-concepts/preloading.mdx

+
+## Preloading and Lazy Loading
+
+When a route has nested lazy components, such components will not be part of the route hierarchy, so they **will not** be preloaded with the route. To preload such components, you can use the [`usePreloadRoute`](/solid-router/reference/primitives/use-preload-route) helper in the parent component to load them when needed.


Given the context of this paragraph, the second sentence here seems misplaced and was the problem we were initially discussing on Discord. usePreloadRoute is for preloading routes directly. (await lazy(string)).preload() is what's necessary to properly preload nested lazy components. Was this maybe an editing mixup?

add notes about route and component preloading

4a50173

atilafassina force-pushed the preload-entries branch from 8602320 to 4a50173 Compare October 18, 2025 16:30

atilafassina self-assigned this Oct 18, 2025

atilafassina added solid-router Related to Solid Router solidstart Related to SolidStart labels Oct 18, 2025

atilafassina requested review from LadyBluenotes, Copilot and devagrawal09 October 18, 2025 16:33

atilafassina marked this pull request as ready for review October 18, 2025 16:34

Copilot AI reviewed Oct 18, 2025

View reviewed changes

src/routes/solid-router/reference/primitives/use-preload-route.mdx Outdated Show resolved Hide resolved

src/routes/solid-router/advanced-concepts/preloading.mdx Outdated Show resolved Hide resolved

atilafassina and others added 3 commits October 18, 2025 18:35

fix backtick typo

50d0a0c

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix bad URL

a2ab463

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

"start" fetching data

f364e32

atilafassina changed the title ~~Preload data~~ content: Expand notes on preloading data Oct 18, 2025

atilafassina added 2 commits October 18, 2025 19:43

both <A> and <a> have the preload behavior, remove ambiguous sent…

a4c79c1

…ence

more content on lazy loading and nested components

7937b09

atilafassina requested a review from Copilot October 20, 2025 08:31

Copilot AI reviewed Oct 20, 2025

View reviewed changes

src/routes/reference/component-apis/lazy.mdx Outdated Show resolved Hide resolved

src/routes/reference/component-apis/lazy.mdx Show resolved Hide resolved

src/routes/solid-router/advanced-concepts/preloading.mdx Show resolved Hide resolved

kodiakhq bot and others added 2 commits October 20, 2025 08:37

Merge branch 'main' into preload-entries

0fe3593

fix typo

e640128

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

LadyBluenotes requested changes Oct 20, 2025

View reviewed changes

kodiakhq bot added 5 commits October 20, 2025 22:51

Merge branch 'main' into preload-entries

a46fd80

Merge branch 'main' into preload-entries

f805d73

Merge branch 'main' into preload-entries

5788b7d

Merge branch 'main' into preload-entries

3d47fe4

Merge branch 'main' into preload-entries

203df8d

mangs reviewed Oct 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

content: Expand notes on preloading data #1306

content: Expand notes on preloading data #1306

atilafassina commented Oct 18, 2025 •

edited

Loading

bolt-new-by-stackblitz bot commented Oct 18, 2025

netlify bot commented Oct 18, 2025 •

edited

Loading

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

LadyBluenotes Oct 20, 2025

atilafassina Oct 20, 2025

LadyBluenotes Oct 20, 2025

mangs left a comment •

edited

Loading

mangs Oct 23, 2025

mangs Oct 23, 2025

mangs Oct 23, 2025

mangs Oct 23, 2025

mangs Oct 23, 2025

Labels

3 participants

	Components are not loaded until rendered.
	Components are not loaded until rendered or manually preloaded.

	Though nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.
	However, nested lazy components will not be preloaded automatically because they are not part of the route hierarchy.

	To preload such components, you can use the `preload` method exposed on the lazy component
	To preload such components, you can use the `preload` method exposed on the lazy component.


		## Preloading and Lazy Loading

		When a route has nested lazy components, such components will not be part of the route hierarchy, so they will not be preloaded with the route. To preload such components, you can use the [`usePreloadRoute`](/solid-router/reference/primitives/use-preload-route) helper in the parent component to load them when needed.

content: Expand notes on preloading data #1306

Are you sure you want to change the base?

content: Expand notes on preloading data #1306

Conversation

atilafassina commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

bolt-new-by-stackblitz bot commented Oct 18, 2025

netlify bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for solid-docs ready!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mangs left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Labels

3 participants

atilafassina commented Oct 18, 2025 •

edited

Loading

netlify bot commented Oct 18, 2025 •

edited

Loading

mangs left a comment •

edited

Loading