DocsChoose

Preact

Preact 10 routes: server-rendered first, then hydrated by Vite in the browser.

Enable Preact

nexyconfig.py

from nexy.core.models import NexyConfigModel
from nexy.frontend import preact


class NexyConfig(NexyConfigModel):
    useFF = preact()
    useAliases = {"@": "src"}

Extensions: .tsx, .jsx
Runtime: Preact 10 (preact, preact-render-to-string)
Build: @preact/preset-vite

Create a route

src/routes/index.tsx

import Counter from "@/components/Counter";

export default function Home() {
  return (
    <main>
      <h1>Hello</h1>
      <Counter />
    </main>
  );
}

The default export is the page component; a named export also works.

Rendering

Server rendering is on by default. Set useCSR = True for client-side rendering.

Layouts

In client mode the root layout.tsx owns the HTML document and every layout.tsx receives its page as children. Preact builds the body in the browser instead of hydrating it. See layout.tsx.

Next steps

Views: compare formats
Markdown and MDX: .mdx routes
Frontend: Vite and the client build

Edit on GitHub