Core Features

HydroJS comes with a variety of core features, including:

• Server-side rendering
• Router with routes sorted by weight, including dynamic, named, and catch-all routes
• API and preload endpoints with CSRF guards
• Route middlewares
• Layout handler
• Route preloading
• Partial hydration
• Redirects
• Cookies
• Events/actions for server-side components, including click and in-view triggers
• Native history and restoration
• Navigation utilities such as `goto`, `reload`, and navigation state helpers
• Output transformation
• Client-side cache handler

A Traditional Approach

HydroJS is a meta-framework that takes a more "traditional" approach. Instead of relying on `.svelte` files and modifying their module context for server-side data handling, HydroJS uses a route handler similar to a controller in an MVC application.

This enables:

• Type inference for improved development experience
• Preloading requests routes for better performance
• Fetching only the required data from the route endpoint, minimizing unnecessary requests

API and Preload Endpoints

Routes in HydroJS can be accessed with the prefixes `__preload__` or `__api__`, allowing developers to retrieve preloaded data or just the raw data. This structured approach reduces redundancy, eliminating the need for separate API endpoints in many cases.

For example, consider a paginated page:

• It needs server-side rendering for initial load
• JavaScript enhances it for fetching additional data
• The same data structure and validation apply both server- and client-side
• Querying the `__api__` endpoint with different parameters makes data retrieval seamless

Routing and Middleware

Routes follow the standard CRUD pattern (POST, GET, PATCH, DELETE) and support middleware. Each route returns a Response object.

A special $ wrapper function is responsible for rendering Svelte views, inferring proper types, and handling Response object properties. HydroJS also determines whether a response is part of the current layout or a standalone page.

Hydration

Efficient hydration is essential to performance, and HydroJS minimizes unnecessary data transfers by prefixing `.svelte` components with `+`. This ensures:

• Server-side data serialization before hydration
• Optimized rendering by hydrating only essential components

Actions for Improved Interactivity

Hydrating large components with static data is inefficient. However, many UI elements—such as buttons for modals, drawers, or global state changes—still need client-side interactivity. This is where actions come into play.

• Create a `clickAction` with a unique key and callback handler.
• Assign it to a custom `click` attribute on an HTML element.
• HydroJS serializes the action and its data, passing it to the framework’s client handler for execution.

This approach keeps hydration minimal while allowing dynamic interactions without excessive client-side scripts.

HydroJS aims to provide a structured, type-safe, and efficient approach to web development, bridging the gap between server and client while maintaining performance and flexibility.

HydroJS is powering the site you are currently viewing.