Hi,

Waku has a feature called Slices, which I believe is unique among React frameworks. The name and the idea were actually inspired by Gatsby's Slice API.

What Is a Slice?

A slice is a reusable component with its own render config. You put it in the src/pages/_slices directory, and the file path becomes its ID.

// ./src/pages/_slices/greet.tsx
export default function Greet() {
  return <p>Hello</p>;
}

export const getConfig = async () => {
  return {
    render: 'static',
  };
};

Using a Slice

You render it with the Slice component and reference it by ID. Any slice used on a page must be listed in the page's slices config. This is a big limitation, but it can't be helped if we want to avoid compiler magic.

// ./src/pages/foo-page.tsx
import { Slice } from 'waku';

export default function FooPage() {
  return (
    <div>
      <h1>Foo</h1>
      <Slice id="greet" />
    </div>
  );
}

export const getConfig = async () => {
  return {
    render: 'static',
    slices: ['greet'],
  };
};

Lazy Slices

This is the interesting part. A slice can be marked lazy, which makes it load independently from the page. This is similar to Astro's server islands.

<Slice id="greet" lazy fallback={<p>Loading...</p>} />

A lazy slice is not listed in the slices config. The page can be prerendered without slices, while the lazy slice is fetched after the initial load and rendered afterward. The slice can be dynamic too.

Why Slices Are Powerful

Slices are easy to understand, yet they are very powerful. The above example simply uses a static slice in a static page, but we can use a dynamic slice in a static page, a static slice in a dynamic page, or a dynamic slice in a dynamic page. The mental model should be straightforward, and it fits Waku's minimal philosophy.

Please give Waku a try and share your feedback.

Happy coding.