suggestion

[xKRISTOFx]

Why you are creating route files only with an export function inside, that exports island build of other islands? Isn't it better to construct pages inside route files and remove that one middle file?

[Jabolol]

Hello, good catch! Nonetheless this is intended design. If you check some commits before, for example 88e9920ba14a9ebf96211b0251da89d881a6206c, there was a redundant wrapper on most files, which has been removed using _layout.tsx, introduced by fresh on version v1.4.

The reason because this intermediate file exists is due to the nature of the framework, fresh. It ships no JavaScript to the client, unless the file is an island. Most components depend on hooks, so they have to be islands necessarily.

Take for example that we make changes to this file, routes/index.tsx. We would expect the console to log true on the initial load.

import { useEffect } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";
import App from "~/islands/App.tsx";

export default function () {
  useEffect(() => {
    console.log({ IS_BROWSER });
  }, []);

  return <App />;
}

But it doesn't do that, it doesn't log anything! The JavaScript is stripped away, that is, the hook isn't sent and that logic is lost. Therefore we need an island to ship the code to the client.

[xKRISTOFx]

Fair enough, when I looked at the documentation, I found out that scripts are removed from components, which is why they need to be static. But if the same thing happens in routes, that explains everything. Thanks for your detailed response.