islas/Counter.tsx import type { Signal } de «@preact/signals»; importar { Button } de «../components/Button.tsx»; interfaz CounterProps { count: Signal
{props.count}
); } Fresh sabe que este archivo es una isla porque se encuentra en el directorio /islands. Esto significa que Fresh renderizará el archivo en el frontend. Enviará la cantidad mínima de JavaScript del frontend 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, pre-renderizar y enviar en una forma compacta. 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 archivo principal index.tsx, verá 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 (
Bienvenido a Fresh
Intente actualizar este mensaje en el
./routes/index.tsx archivo y actualizar.
); } Lo más importante que hay que destacar aquí es la inclusión del componente Counter (import Counter from «../islands/Counter.tsx») y su uso en el marcado JSX normal. Se trata de una forma sencilla y directa de combinar el código renderizado del lado del servidor con la funcionalidad de la isla del frontend.
Deja una respuesta