Arquitetura de Componentes de Servidor e Islands

A arquitetura de islands é uma abordagem moderna para construir aplicações web performáticas minimizando o JavaScript do lado do cliente.

O Que é a Arquitetura de Islands?

A arquitetura de islands envolve:

• HTML renderizado no servidor para conteúdo estático
• "Islands" interativas isoladas para componentes dinâmicos
• JavaScript mínimo enviado ao cliente

Benefícios

1. Melhor Desempenho: Menos JavaScript para baixar e processar
2. Carregamento Inicial Mais Rápido: O HTML é renderizável imediatamente
3. Amigável para SEO: Renderização completa no lado do servidor
4. Melhoria Progressiva: Funciona sem JavaScript

Implementando no HonoX

Crie um componente island em 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-o em sua rota:

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>
  );
});

Boas Práticas

• Mantenha as islands pequenas e focadas
• Use client:load apenas quando necessário
• Prefira a renderização no servidor para conteúdo estático
• Use client:idle para interatividade não crítica

Conclusão

A arquitetura de islands oferece um excelente equilíbrio entre interatividade e desempenho.