Server Components & Islands Architecture

The islands architecture is a modern approach to building performant web applications by minimizing client-side JavaScript.

What is Islands Architecture?

Islands architecture involves:

• Server-rendered HTML for static content
• Isolated interactive "islands" for dynamic components
• Minimal JavaScript sent to the client

Benefits

1. Better Performance: Less JavaScript to download and parse
2. Faster Initial Load: HTML is immediately renderable
3. SEO Friendly: Full server-side rendering
4. Progressive Enhancement: Works without JavaScript

Implementing in HonoX

Create an island component in app/islands/Counter.tsx:

import { createIsland } from "honox/island";

export default createIsland({
  Component: function Counter() {
    const [count, setCount] = createSignal(0);
    
    return (
      <div>
        <p>Count: {count()}</p>
        <button onClick={() => setCount(count() + 1)}>
          Increment
        </button>
      </div>
    );
  },
});

Use it in your route:

import Counter from "../islands/Counter";

export default createRoute((c) => {
  return c.render(
    <div>
      <h1>My Page</h1>
      <p>This is static content.</p>
      <Counter client:load />
    </div>
  );
});

Best Practices

• Keep islands small and focused
• Use client:load only when needed
• Prefer server rendering for static content
• Use client:idle for non-critical interactivity

Conclusion

Islands architecture provides an excellent balance between interactivity and performance.