Fresh uses an islands architecture for its web pages. What is the main benefit of this approach?
Think about how hydration affects page speed and user experience.
Fresh's islands architecture hydrates only small interactive parts (islands) of the page, which reduces JavaScript load and improves performance compared to hydrating the entire page.
In a Fresh route file, you export an async function named handler. What is its role?
Consider what server-side code needs to do when a user visits a page.
The handler function in Fresh handles incoming HTTP requests for the route, allowing server-side logic and response generation.
Which option correctly defines a Fresh functional component that accepts props?
import { h } from "preact"; // Choose the correct component definition below:
Remember how to access props and return JSX in a function.
Option D correctly defines a function component that takes props and returns JSX using props.name. Option D uses an undefined variable. Option D lacks a return statement. Option D uses a string 'name' instead of props.name.
Consider this Fresh component code snippet:
import { useState } from "preact/hooks";
export default function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return Count: {count}
;
}What will be displayed when this component renders?
Think about when state updates happen and how rendering works.
Calling setCount inside the component body causes a state update on every render, which leads to an infinite loop and crashes the app. This is because each render triggers a state update, causing another render indefinitely.
You created a file at routes/about.tsx with this code:
export default function About() {
return About Page
;
}But when you visit /about in the browser, you get a 404 error. What is the most likely cause?
Check how Fresh matches URLs to route files.
Fresh matches routes to files by exact name and casing. A typo or wrong casing in the file or folder name will cause a 404. The file extension .tsx is correct for Fresh. Middleware and fresh.gen.ts are not required for basic routing.