From db0e87da21835edb4459f6671a2a143970d06997 Mon Sep 17 00:00:00 2001
From: Atila Fassina <atila@fassina.eu>
Date: Fri, 27 Sep 2024 14:56:52 +0200
Subject: [PATCH] Add TS/JS tabs and update from `load()` to `preload()` (#902)

---
 .../data-loading.mdx                          | 74 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 2 deletions(-)

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 d467ff3dc..a0eca587d 100644
--- a/src/routes/solid-start/building-your-application/data-loading.mdx
+++ b/src/routes/solid-start/building-your-application/data-loading.mdx
@@ -12,6 +12,8 @@ Solid provides a way to load data from your data sources using the [`createResou
 It takes an async function and returns a [signal](/reference/basic-reactivity/create-signal) from it.
 `createResource` integrates with [`Suspense`](/reference/components/suspense) and [`ErrorBoundary`](/reference/components/error-boundary) to help manage lifecycle and error states.
 
+<TabsCodeBlocks>
+<div id="ts">
 ```tsx {6-9}
 import { For, createResource } from "solid-js";
 
@@ -26,6 +28,22 @@ export default function Page() {
 	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
 }
 ```
+</div>
+<div id="js">
+```tsx {4-7}
+import { For, createResource } from "solid-js";
+
+export default function Page() {
+	const [users] = createResource(async () => {
+		const response = await fetch("https://example.com/users");
+		return (await response.json());
+	});
+
+	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
+}
+```
+</div>
+</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.
@@ -36,6 +54,8 @@ for the example below we will be using the data in APIs in [`solid-router`](/sol
 
 Using some of the features of `solid-router`, we can create a cache for our data:
 
+<TabsCodeBlocks>
+<div id="ts">
 ```tsx title="/routes/users.tsx" {6, 9, 12}
 import { For } from "solid-js";
 import { createAsync, cache } from "@solidjs/router";
@@ -48,7 +68,7 @@ const getUsers = cache(async () => {
 }, "users");
 
 export const route = {
-	load: () => getUsers(),
+	preload: () => getUsers(),
 };
 
 export default function Page() {
@@ -57,6 +77,29 @@ export default function Page() {
 	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
 }
 ```
+</div>
+<div id="js">
+```tsx title="/routes/users.jsx" {4, 7, 10}
+import { For } from "solid-js";
+import { createAsync, cache } from "@solidjs/router";
+
+const getUsers = cache(async () => {
+	const response = await fetch("https://example.com/users");
+	return (await response.json());
+}, "users");
+
+export const route = {
+	preload: () => getUsers(),
+};
+
+export default function Page() {
+	const users = createAsync(() => getUsers());
+
+	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
+}
+```
+</div>
+</TabsCodeBlocks>
 
 With this method, however, there are some caveats to be aware of:
 
@@ -78,6 +121,8 @@ Through the `"use server"` comment you can tell the bundler to create an RPC and
 This lets you write code that only runs on the server without needing to create an API route for it.
 For example, it could be database access or internal APIs, or when you sit within your function and need to use your server.
 
+<TabsCodeBlocks>
+<div id="ts">
 ```tsx title="/routes/users.tsx" {7}
 import { For } from "solid-js";
 import { createAsync, cache } from "@solidjs/router";
@@ -90,7 +135,30 @@ const getUsers = cache(async () => {
 }, "users");
 
 export const route = {
-	load: () => getUsers(),
+	preload: () => getUsers(),
+};
+
+export default function Page() {
+	const users = createAsync(() => getUsers());
+
+	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
+}
+```
+</div>
+
+
+<div id="js">
+```tsx title="/routes/users.jsx" {5}
+import { For } from "solid-js";
+import { createAsync, cache } from "@solidjs/router";
+
+const getUsers = cache(async () => {
+	"use server";
+	return store.users.list();
+}, "users");
+
+export const route = {
+	preload: () => getUsers(),
 };
 
 export default function Page() {
@@ -99,3 +167,5 @@ export default function Page() {
 	return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
 }
 ```
+</div>
+</TabsCodeBlocks>