diff --git a/src/routes/solid-start/building-your-application/data-loading.mdx b/src/routes/solid-start/building-your-application/data-loading.mdx
index a0eca587d..3281d498d 100644
--- a/src/routes/solid-start/building-your-application/data-loading.mdx
+++ b/src/routes/solid-start/building-your-application/data-loading.mdx
@@ -14,7 +14,7 @@ It takes an async function and returns a [signal](/reference/basic-reactivity/cr
 
 <TabsCodeBlocks>
 <div id="ts">
-```tsx {6-9}
+```tsx {6-9} title="/src/routes/users.tsx"
 import { For, createResource } from "solid-js";
 
 type User = { name: string; house: string };
@@ -30,7 +30,7 @@ export default function Page() {
 ```
 </div>
 <div id="js">
-```tsx {4-7}
+```tsx {4-7} title="/src/routes/users.jsx"
 import { For, createResource } from "solid-js";
 
 export default function Page() {
@@ -46,11 +46,8 @@ export default function Page() {
 </TabsCodeBlocks>
 
 When fetching inside components, you can encounter unnecessary waterfalls, especially when nested under lazy loaded sections.
-To solve this, it can be valuable to introduce a hoist and cache mechanism.
-
-Using a library like [Tanstack Query](https://tanstack.com/query/latest) can help with this.
-
-for the example below we will be using the data in APIs in [`solid-router`](/solid-router)
+To solve this, it is recommended to hoist the data fetching to the top of the component tree or, when in [SolidStart](/solid-start), use the server to fetch data in a non-blocking way.
+For the example below we will be using the data in APIs in [`solid-router`](/solid-router)
 
 Using some of the features of `solid-router`, we can create a cache for our data:
 
@@ -78,6 +75,7 @@ export default function Page() {
 }
 ```
 </div>
+
 <div id="js">
 ```tsx title="/routes/users.jsx" {4, 7, 10}
 import { For } from "solid-js";