Skip to content

Commit

Permalink
add components with server side resource
Browse files Browse the repository at this point in the history
  • Loading branch information
rcannood committed Oct 22, 2024
1 parent 8f7c55f commit dc6341a
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 34 deletions.
21 changes: 21 additions & 0 deletions src/components/SSRLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { createResource, createSignal, Match, Switch } from "solid-js";

function fetchServerResource(): Promise<string> {
"use server";
return new Promise((resolve) => {
setTimeout(() => {
resolve("Hello from the server!");
}, 1000);
});
}

export default function SSRLabel() {
const [data] = createResource<string>(fetchServerResource);
return (
<Switch>
<Match when={data.loading}>Loading...</Match>
<Match when={data.error}>Error: {data.error}</Match>
<Match when={data()}>{data()}</Match>
</Switch>
);
}
20 changes: 3 additions & 17 deletions src/routes/about.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,10 @@
import { A } from "@solidjs/router";
import Counter from "~/components/Counter";
import SSRLabel from "~/components/SSRLabel";

export default function About() {
return (
<main class="text-center mx-auto text-gray-700 p-4">
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">About Page</h1>
<Counter />
<p class="mt-8">
Visit{" "}
<a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
solidjs.com
</a>{" "}
to learn how to build Solid apps.
</p>
<p class="my-4">
<A href="/" class="text-sky-600 hover:underline">
Home
</A>
{" - "}
<span>About Page</span>
<p class="text-2xl font-bold text-sky-700">
<SSRLabel />
</p>
</main>
);
Expand Down
20 changes: 3 additions & 17 deletions src/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,10 @@
import { A } from "@solidjs/router";
import Counter from "~/components/Counter";
import SSRLabel from "~/components/SSRLabel";

export default function Home() {
return (
<main class="text-center mx-auto text-gray-700 p-4">
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Hello world!</h1>
<Counter />
<p class="mt-8">
Visit{" "}
<a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
solidjs.com
</a>{" "}
to learn how to build Solid apps.
</p>
<p class="my-4">
<span>Home</span>
{" - "}
<A href="/about" class="text-sky-600 hover:underline">
About Page
</A>{" "}
<p class="text-2xl font-bold text-sky-700">
<SSRLabel />
</p>
</main>
);
Expand Down

0 comments on commit dc6341a

Please sign in to comment.