Introdução ao Deno Fresh: Uma nova abordagem ao JavaScript full-stack

islands/Counter.tsx 
import type { Signal } from "@preact/signals";
import { Button } from "../components/Button.tsx";

interface CounterProps {
  count: Signal;
}

export default function Counter(props: CounterProps) {
  return (
    

       props.count.value -= 1}>-1
      
{props.count}
       props.count.value += 1}>+1
    
  );
}

Fresh sabe que este arquivo é um ilha porque vive no /islands diretório. Isso significa que o Fresh renderizará o arquivo no front-end. Ele enviará a quantidade mínima de JavaScript front-end para lidar apenas com essa “ilha” de interatividade. Então, ele pode ser usado em uma variedade de lugares, até mesmo por elementos que são totalmente renderizados no servidor, onde eles podem ser otimizados, pré-renderizados e enviados em um formato compacto. Em teoria, pelo menos, essa configuração oferece o melhor dos dois mundos. Incorporar o conceito de ilha no roteamento de arquivos é uma ideia atraente.

Se retornarmos ao principal index.tsx arquivo, você verá como a ilha é usada:

/routes/index.tsx 
import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";

export default function Home() {
  const count = useSignal(3);
  return (
    

      

        
        
        

          Try updating this message in the
          ./routes/index.tsx file, and refresh.
        
        
      
    
  );
}

O principal a notar aqui é a inclusão do Counter componente (import Counter from "../islands/Counter.tsx") e seu uso na marcação JSX normal. Este é um meio simples e direto de combinar código renderizado do lado do servidor com funcionalidade de ilha front-end.