Introducción a Deno Fresh: una nueva perspectiva sobre 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 archivo es un isla porque vive en el /islands directorio. Esto significa que Fresh renderizará el archivo en el front-end. Enviará la cantidad mínima de JavaScript del front-end para manejar solo esta «isla» de interactividad. Luego, se puede usar en una variedad de lugares, incluso por elementos que se renderizan completamente en el servidor, donde se pueden optimizar, renderizar previamente y enviar en un formato compacto. En teoría, al menos, esta configuración le brinda lo mejor de ambos mundos. Incorporar el concepto de isla en el enrutamiento de archivos es una idea convincente.

Si volvemos al tema principal index.tsx archivo, verás cómo se usa la isla:

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

Lo más importante a destacar aquí es la inclusión de la Counter componente (import Counter from "../islands/Counter.tsx") y su uso en la normalidad Marcado JSXEste es un medio simple y directo de combinar el código renderizado del lado del servidor con la funcionalidad de la isla del frontend.