The Island Concept in Fresh: A New Way to Handle Front-end Interactivity

When it comes to efficient front-end development, the island concept in Fresh offers a unique approach to handling interactivity. By breaking down components into “islands” and rendering them only when needed, Fresh optimizes the front-end JavaScript delivery and allows for seamless integration with server-rendered elements.

The Island File: Counter.tsx

Located in the /islands directory, Counter.tsx is a perfect example of an island file in Fresh. This file contains the Counter component, providing a simple way to handle counting logic in a compact manner.

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

Implementing the Island in Main File

In the main index.tsx file, the Counter island is utilized to showcase its functionality. By importing the Counter component and incorporating it into the JSX markup, Fresh seamlessly combines server-side rendering with front-end interactivity.

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

The island concept in Fresh revolutionizes the way front-end interactivity is handled, providing a seamless integration of server-rendered elements with optimized front-end JavaScript delivery. By incorporating islands into file routing, Fresh offers a unique and efficient approach to front-end development.