Jarl André Comments

import type { FreshContext } from "$fresh/server.ts";
import Example from "../components/Example.tsx";
import { test } from "../data/repo.ts";

export default async function Home(_req: Request, _ctx: FreshContext) {
  const n = await test();
  return <Example n={n} />
}

import type { FreshContext } from "$fresh/server.ts";
import Example from "../components/Example.tsx";
import { test } from "../data/repo.ts";

export default async function Home(_req: Request, _ctx: FreshContext) {
  const n = await test();
  return <Example n={n} />
}

components/Example.tsx:

import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";

export default function Example(props: { n: number }) {
  const count = useSignal(props.n);

  return (
    <div class="px-4 py-8 mx-auto bg-[#86efac]">
      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
        <img
          class="my-6"
          src="/logo.svg"
          width="128"
          height="128"
          alt="the Fresh logo: a sliced lemon dripping with juice"
        />
        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
        <p class="my-4">
          Try updating this message in the
          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
        </p>
        <Counter count={count} />
      </div>
    </div>
  );
}

import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";

export default function Example(props: { n: number }) {
  const count = useSignal(props.n);

  return (
    <div class="px-4 py-8 mx-auto bg-[#86efac]">
      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
        <img
          class="my-6"
          src="/logo.svg"
          width="128"
          height="128"
          alt="the Fresh logo: a sliced lemon dripping with juice"
        />
        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
        <p class="my-4">
          Try updating this message in the
          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
        </p>
        <Counter count={count} />
      </div>
    </div>
  );
}

16 replies

DDeno

•Created by anggoran on 4/3/2024 in #help

Signals & Data Fetching

haha .. sorry .. yes .. figured it out myself .. exactly as I described it

16 replies

DDeno

•Created by anggoran on 4/3/2024 in #help

Signals & Data Fetching

probably need to move the contents of the Home function into another component? and convert Home to an async server side component ?

16 replies

DDeno

•Created by anggoran on 4/3/2024 in #help

Signals & Data Fetching

i have sort of a similar problem, with data fetching. I think my brain is hardwired for server side data fetching, and, since i know that route components like index.tsx and even _app.tsx is server side rendered, i find it difficult to understand that for ex in Home function in index.tx, that i cannot combine the use of useSignal AND fetch async data at the same time. If i convert the Home function to a function that takes request and context and make it async, the use of useSignal is no longer allowed and i cannot load data asynchronously .. i find it a bit wierd i have such problems grokking this because i have been working on and off backend and frontend for 15 years. Somehow Fresh seems to combine the two worlds in a rather peculiar way. So, lets say i want to load some data on the server side, for ex before i render the Counter island, in a "fresh" Fresh project, how do i go about changing the Home function in index.tsx? i propably only need a gentle kick in my leg to understand it, so be gentle 😄

16 replies