Preact — Create Web Component and Server Side Rendering

Preact is a front end web framework that’s similar to React.

It’s smaller and less complex than React.

In this article, we’ll look at how to get started with front end development with Preact.

Creating a Web Component

We can convert a Preact component into a web component with the preact-custom-element package.

For example, we can write:

import { render } from "preact";
import register from "preact-custom-element";

const Greeting = ({ name = "World" }) => <p>Hello, {name}!</p>;

register(Greeting, "x-greeting", ["name"]);

export default function App() {
  return <x-greeting name="Jane"></x-greeting>;
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

to import the register function to register our Preact component as a web component.

We have the Greeting component which we register as the x-greeting custom element.

The 3rd argument has the attribute that x-greeting takes, which is the name attribute.

It’ll be interpolated into the p element in Greeting like we have with a regular Preact component.

In App , we use th x-greeting web component with the name prop set.

Then we see:

Hello, Jane!

displayed.

Observed Attributes

We have to make attributes observable so that it can respond to value changes.

To make them observable, we can write:

import { Component, render } from "preact";
import register from "preact-custom-element";

class Greeting extends Component {
  static tagName = "x-greeting";
  static observedAttributes = ["name"];

  render({ name }) {
    return <p>Hello, {name}!</p>;
  }
}
register(Greeting);

export default function App() {
  return <x-greeting name="Jane"></x-greeting>;
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We create our Greeting component.

Then we set the tagName static property to set its tag name.

And we set the observedAttributes to an array of attribute names to watch.

In App , we use the x-greeting component the same way.

If no observableAttributes are specified, then the data type of the attributes will be inferred from the keys of propTypes .

Setting the propTypes will make them observable.

For example, if we have:

import { render } from "preact";
import register from "preact-custom-element";

function FullName({ first, last }) {
  return (
    <span>
      {first} {last}
    </span>
  );
}

FullName.propTypes = {
  first: Object,
  last: Object
};

register(FullName, "full-name");
export default function App() {
  return <full-name first="Jane" last="Smith"></full-name>;
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We set the first and last prop types to Object and they’ll be made observable.

Server-Side Rendering

We can render Preact components to strings.

This lets us render content on the server-side, which is useful for increasing performance.

For example, we can write:

import render from "preact-render-to-string";

const App = <div class="foo">content</div>;

console.log(render(App));

render renders the App component to a string.

Now we should see:

<div class="foo">content</div>

logged in the console log.

Conclusion

We can create web components from Preact components.

Also, we can render components to strings.