Server-Komponenten- und Islands-Architektur

Die Islands-Architektur ist ein moderner Ansatz zur Erstellung performanter Webanwendungen durch Minimierung des clientseitigen JavaScripts.

Was ist Islands-Architektur?

Islands-Architektur umfasst:

• Serverseitig gerendertes HTML für statische Inhalte
• Isolierte interaktive „Islands" für dynamische Komponenten
• Minimales an den Client gesendetes JavaScript

Vorteile

1. Bessere Performance: Weniger JavaScript zum Herunterladen und Parsen
2. Schnelleres Erstladen: HTML ist sofort renderbar
3. SEO-Freundlich: Vollständiges Server-Side-Rendering
4. Progressive Verbesserung: Funktioniert ohne JavaScript

Implementierung in HonoX

Erstellen Sie eine Island-Komponente 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>
    );
  },
});

Verwenden Sie sie in Ihrer 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

• Halten Sie Islands klein und fokussiert
• Verwenden Sie client:load nur bei Bedarf
• Bevorzugen Sie Server-Rendering für statische Inhalte
• Verwenden Sie client:idle für nicht-kritische Interaktivität

Fazit

Islands-Architektur bietet eine ausgezeichnete Balance zwischen Interaktivität und Performance.