Layouts

Layouts are plain Preact components that are inherited based on the matching pattern. When you have a section on your site where all pages share the same HTML structure and only the content changes, a layout is a neat way to abstract this. Layouts only ever render on the server. The passed Component value represents the children of this component.

main.tsx

function PageLayout({ Component }) {
  return (
    <div>
      <Component />
      <aside>Here is some sidebar content</aside>
    </div>
  );
}

const app = new App()
  .layout("*", PageLayout)
  .get("/", (ctx) => ctx.render(<h1>hello</h1>));

If you browse to the / route, Fresh will render the following HTML

Response body

<div>
  <h1>hello world</h1>
  <aside>Here is some sidebar content</aside>
</div>

Options#

Add a layout and ignore all previously inherited ones.

main.ts

app.layout("/foo/bar", MyComponent, { skipInheritedLayouts: true });

Ignore the app wrapper component:

main.ts

app.layout("/foo/bar", MyComponent, { skipAppWrapper: true });