I usually have my <App> component (the root component) accept a url prop, which it passes to <Router>:

const App = ({ url }) => (
  <Router url={url}>
    <Home path="/" />
    <Foo path="/foo" />
    <NotFound default />
  </Router>
);

With that in place you can do this:

import express from 'express';
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
import App from '../client/components/app';

let server = express();
server.get('*', (req, res) => {
    let html = renderToString(
      <App url={req.url} />
    );
    res.text(`<!doctype html><html><body>${html}</body></html>`);
});

Let me know if that helps!

Works perfectly fine. Is there something equivalent for the Link tags?

import Router from "preact-router";
import { Link } from "preact-router/match";
import Clock from "./Clock";

type AppProps = {
  url?: string;
};

export default ({ url }: AppProps) => (
  <div>
    <nav>
      <Link activeClassName="active" href="/">
        Home
      </Link>
      <Link activeClassName="active" href="/clock">
        Clock
      </Link>
    </nav>
    <Router url={url}>
      <div path="/">Home Page</div>
      <Clock path="/clock" />
    </Router>
  </div>
);

The "active" class is not set on ssr response not on hydrate. It's only set on clientside request.

Can this be used for SSR? #207

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions