[QUESTION] Components vs Islands

[synalice]

1. Should I create a separate /components folder for my .tsx components if they are not strictly interactive like islands supposed to be? Or do I need to put such components inside /island directory no matter if they are interactive or not?
2. Is it a requirement for an island to be interactive?
3. What is considered interactive in terms of islands?
4. In what way are islands (I assume that islands are considered to be all the .tsx files in /islands directory) treated differently from just regular .tsx components? If I do this...

/** @jsx h */
import { h } from "preact";
import MyComponent from "../some-random-directory/MyComponent.tsx";

export default function Home() {
  return (
    <MyComponent/>
  );
}

...how exactly it is being treated differently from this...

/** @jsx h */
import { h } from "preact";
import MyComponent from "../islands/MyComponent.tsx";

export default function Home() {
  return (
    <MyComponent/>
  );
}

I did read about island architecture and somewhat understood it, so my questions are more about best practices (or at least how people think it should be done) of creating an app with Fresh.

[synalice]

It seems that what I'm asking is similar to what is discussed in #326 (comment) and proposed in #350

[synalice]

I suppose I should have posted this question in the discussion tab. I'm sorry.

[lucacasonato]

Components are static, islands are dynamic. They should be split across folders as such. You should never have static islands.

Interactive means you need to do some logic client side, for example onclick, useEffect, useState or similar.

[tanquar]

Hi, I'm trying to figure out how to best distinguish islands and components.

As far as I understand,

• all components should be static
  • probably, not using useState or useEffect, or any other client side JS code
• all islands should be interactive
  • probably, using useState or useEffect, or any other client side JS code

On this ground, I have tested in my own project and found that:
1 - server side useState in an island will work anywhere
2 - client side useState in an island will work anywhere
3 - server side useState in a component will only work if the components is called in an island, but not if called in routes directly
4 - client side useState in a component will only work if the components is called in an island, but not if called in routes directly

While 3 and 4 work in a certain condition, I suppose both 3 and 4 are against "all components should be static".

If all these are true, how one can explain "Carousel" component from the gallery?
https://github.com/denoland/fresh/blob/ff3d754fbd42f8ac088548dc81ab4aea1da6b633/www/components/gallery/Carousel.tsx

useSignal and useEffect are used there, and clicking events are something that must be handled client side.
Will this mean interactive? or still not interactive for some reason?

I've read #326 as well:

• nesting islands are not supported

I suppose this might be the reason and, here I'm confused: should we strictly build something an island as long as it is interactive? or just OK to make it as a component to avoid island nesting?

[alamo42]

The Carousel component is marked as an island on the fresh website.

[alamo42]

I'm new to fresh, but as far as I understand:

1. You should create static components only in components/.
2. All islands are interactive.
3. The execute javascript in the client, as opposed to components and routes which are pre-rendered in server then sent to client.
4. islands cannot use other islands, but they can use components. In your first code example, that would go against the defined fresh project structure, so I would discourage from using it. The latter example breaks this rule, as you are importing an island in an island.

All in all, I think the purpose of fresh is to encourage static server rendered pages. Nowadays, most websites make use of React, Angular and other frameworks which make it easy to create static sites or SSR sites, but they both require some javascript to work client side. Instead, Fresh only serves static content by default, without any javascript, which is restricted to islands alone.