Waku Gets Slices API Inspired by Gatsby

Hi,

Waku v0.25.0 has been released with a new API. It's called Slices. The Slices API is inspired by Gatsby's similar API, at least we took the name. However, I don't think every detail is the same. We used to have layout and page components, and now, with the new API, slice components.

Layouts and Pages

Layouts and pages are based on routing. For the /foo route, we use:

src/pages/_layout.tsx
src/pages/foo/_layout.tsx
src/pages/foo/index.tsx

Slices

Slices are isolated from routing. You can define one like:

src/pages/_slices/bar.tsx

It isn’t served based on routing. We need to explicitly use it in other components. The way we use the slice is as simple as:

<Slice id="bar" />

Use Cases

So, what are the use cases? I think there are at least three.

1. Shared Components

We could use the slice in both / and /foo routes. When we navigate from / to /foo, we can reuse the cached slice component. This makes sense if either / or /foo is dynamic, and the slice component is static. It works only with client navigation (or soft navigation).

2. Mixing Dynamic and Static Parts

While it is technically possible with layouts and the (group) syntax, using the Slices API can be more straightforward. If your page is static, you can embed a dynamic slice to mix static and dynamic parts. If your page is dynamic, you can embed a static slice. You can also embed multiple static or dynamic slices regardless of the page type.

3. Lazy Slices

This one is a bit different. We call these lazy slices. You use the lazy prop like:

<Slice id="bar" lazy fallback="Loading..." />

Lazy slices are fetched after the initial rendering and hydration are done. One use case is having a static page with a lazy dynamic slice. If we build the page, it generates HTML statically, which can be placed on a CDN. The dynamic slice is fetched from the server after the client finishes rendering the initial page from the CDN. This is what I call “Waku Islands.”

Limitations and Future Exploration

We still have more use cases to explore, but these three are the initial motivations.

One caveat with slices is that if a slice is not used as a lazy slice and is embedded in a page, the page’s config must include all IDs of slices used in that page. This is a designed limitation. It is a bit tedious, but I hope it is not too much.

For more information, check out the announcement post at https://waku.gg/blog/rethinking-fine-grained-components.

Hope you enjoy Waku with the new API.

Happy coding.