Concepts
The way Fresh works is that it receives a
Request, passes it
through one or more middlewares until one of them responds. This can be an HTML
response, a JSON response or any other response for that matter.
If the response was HTML and contained Islands (=interactive Preact components), Fresh will boot them up in the browser and execute the relevant JavaScript.
Here is an overview of the basic concepts in Fresh:
- Architecture - How requests flow through Fresh, from middleware to islands
- App - Holds all the information about your app, like routes, etc
- Middleware - Respond to a request and return
a
Response. Used to set headers, or pass state to other middlewares. When a middleware doesn’t call the next one and returns a response, it’s usually called a “handler”. - Context - Passed through every middleware. Use this to share state, trigger redirects or render HTML.
- Routing - Responds to a particular URL and runs as chain of middlewares if it matches
- Data Fetching - Load data on the server and pass it to page components
- Islands - Render interactive Preact components on the client
- Signals - Reactive state management for islands
- Static Files - Serve images, CSS, and other assets
- File Routing - Convention-based routing from the filesystem
Advanced concepts:
- App wrapper - Responsible for the outer HTML
structure, usually up to the
<body>-tag - Layouts - Re-use a shared layout when calling
ctx.render()across routes - Partials - Stream in server generated content on the current page