Partial hydration

Slinkity lets you control how and when your JS-laden components are rendered. Let's understand the options available to you.

To choose how a given component is rendered, you'll need to pass the render prop.

// Page.jsx
export const frontMatter = {
render: 'eager';
}

function Page() {...}

More on page components

<!-- page-with-shortcode.html -->
<body>
{% react 'components/Example' 'render' 'lazy' %}
</body>

More on shortcodes

"eager" - the default for all components

Section titled ""eager" - the default for all components"

This mirrors how "traditional" component-based frameworks operate. An eagerly loaded component will be rendered to static HTML, and shipped to the client as a JavaScript bundle.

Say we have an eagerly loaded component like this:

<!-- page-with-shortcode.html -->
<body>
{% react 'components/Example' 'render' 'eager' %}
</body>

Whenever we visit page-with-shortcode.html, we'll import React and our components/Example.jsx JS bundle as soon as the page is done parsing (see MDN's docs on scripts with type="module"). This ensures our component is interactive as soon as possible.

This is very similar to eager, but with a twist: we only load your component's JS when your component is scrolled into view. This uses the Intersection Observer API to figure out whether your component is on the page. Once it is, we quickly grab the necessary dependencies to hydrate your component.

Note: We still import Slinkity-specific scripts ahead of time using module preloading. Don't worry, it's a very small bundle! We just use this to mount your component once it scrolls into view.

Static components are rendered to HTML at build time, but no JavaScript is shipped to the client. This means no interactivity, no state management, nothing. Use this option if you want to use component languages like React as a templating language only.