using islands

[MFJoyBoy]

in my application i am using router
in the router i have some routes and a navigation bar component
in the navigation bar component, there is bunch of A() components
so in the router component there is a navigation bar component and outlet component
*i can not use A() component outside of Router() component, i will get an error
with island disabled the wasm size is about 10MB, with island enabled the wasm size is about 800KB
when island is activated, when i click on each A() element a page reload happens, in order to prevent page reload (SPA behavior) i have to mark Router() component as island, but it then increase the wasm size to 10MB+
i think i can use a() (direct html element), so i don't have to put navigation bar component inside Router() component, right?
or there is better way to handle this situation?
to be more specific, i want to have island feature activated with minimal wasm size

[gbj]

with island disabled the wasm size is about 10MB

I assume this is in debug mode, not release mode? In release mode it should be a few hundred kb. In debug mode the binary size really doesn't matter.

in order to prevent page reload (SPA behavior) i have to mark Router() component as island

I think there's a fundamental misunderstanding here. Islands are not designed for SPA behavior, they are designed for traditional multi-page-app/server-rendered behavior, with some islands of interactivity. Once you have SPA behavior/client-side navigation you need to ship the entire application to the frontend anyway and there is no point to islands. (If you want a kind of combination, with the feel of client-side routing but the benefits of islands, you can see the islands_router example.)

Using islands, you can't use any of the router APIs inside islands.

These are just trade-offs.