Fresh: A Modern Web Platform for Island-Based Interactivity

Fresh is a full-featured, next-generation web framework designed for speed, performance, and ease of interactive website development. It stands out for its “Islands Architecture” rendering approach, which allows you to create static websites by default with dynamic elements where needed. Fresh uses Deno, a modern, secure JavaScript and TypeScript runtime, to facilitate rapid development and deployment.

Key Features and Benefits of Fresh

Island Architecture: This is the main feature of Fresh. Instead of rendering the entire page on the server as a single entity, Fresh renders most of its components as static HTML. Interactivity is added only to individual “islands” on the page using JavaScript that is loaded and executed only for those specific elements. This significantly reduces the amount of JavaScript required to initially load a page, which results in exceptional loading speeds and better overall web performance.

Server-Side Rendering (SSR) by default: Fresh uses server-side rendering for initial content rendering, which improves SEO and First Contentful Paint.

Automatic State Management: Fresh has a built-in state management system that simplifies the exchange of data between server-side components and client-side “islands” without the need to write a lot of manual code.

Preact Integration: For client-side interactivity, Fresh uses Preact, a fast and lightweight JavaScript library compatible with the React API. This provides a familiar development experience for those already familiar with React, but with a smaller set size.

Out-of-the-box TypeScript support: Deno, on which Fresh is built, has built-in TypeScript support, providing better type safety and improving the development process.

Filesystem-Based Routing: Fresh uses an intuitive routing system based on the folder structure of your project. Each file in the routes folder automatically becomes a route on your website.

Simple forms and data processing: Fresh provides convenient tools for working with forms and data processing on both the client and server.

Integration with Deno Deploy: Deploying websites built with Fresh on the Deno Deploy platform is extremely simple and fast thanks to its optimized infrastructure.

No build phase: Fresh’s Deno architecture often eliminates the traditional build phase, significantly speeding up the development and deployment process.

How does the island architecture work in Fresh?

In traditional SPAs (single-page applications), the entire user interface is often displayed and interactive on the client. This can lead to large JavaScript bundle sizes and slow initial loading. Fresh offers a different approach:

Server-side rendering: The server first renders most of the page components as static HTML. This ensures fast content display for the user and improves SEO.

Defining “islands”: The developer defines individual components that require interactivity (e.g. buttons, forms, carousels). These components become “islands”.

Client-side hydration (partial): Only for these “islands” the browser loads the necessary JavaScript code and makes them interactive. The rest of the page remains static.

This approach allows you to significantly reduce the amount of JavaScript that the browser needs to load for the initial display of the page, since interactivity is loaded only where it is really needed.

Who is Fresh for?

Fresh is a great choice for developing:

Content-oriented websites: blogs, documentation, portfolios, where loading speed and search engine optimization are crucial.

Web applications with interactive elements: Online stores, dashboards, where selective interactivity is needed without unnecessary load on the client.

Projects where development performance is important: thanks to its ease of use, TypeScript support and the absence of a complex creation phase, Fresh contributes to rapid development.

Developers who value modern tools and approaches: Fresh takes advantage of Deno and offers an innovative architecture.

Comparison with other frameworks

Fresh occupies a niche between fully static site generators (SSGs) and full-fledged SPA frameworks. It combines the advantages of both approaches: the speed and SEO of SSGs and the interactivity of SPAs, but with a more efficient use of client-side JavaScript.

Compared to React/Next.js, Fresh often results in smaller package sizes and faster load times due to its island architecture. Compared to frameworks like Astro (which also uses an island architecture), Fresh has a more complex approach to state management and form handling.

In my opinion, Fresh is promising and innovative.

The team at Swan Software Solutions is always learning. Contact us to find out more about how our team could help your team with a custom solution or other technology needs.