sdk/client

The rwsdk/client module provides a set of functions for client-side operations.

`initClient`

The initClient function is used to initialize the React Client. This hydrates the RSC flight payload that’s add at the bottom of the page. This makes the page interactive.

`initClientNavigation`

The initClientNavigation function is used to initialize the client side navigation. An event handler is assocated to clicking the document. If the clicked element contains a link, href, and the href is a relative path, the event handler will be triggered. This will then fetch the RSC payload for the new page, and hydrate it on the client.

`ClientNavigationOptions`

initClientNavigation() accepts an optional ClientNavigationOptions object that lets you control how the browser scrolls after each navigation:

Option	Type	Default	Description
`scrollToTop`	`boolean`	`true`	Whether to scroll to the top of the page after a successful navigation. Set it to `false` when you want to preserve the existing scroll position (for example, an infinite-scroll list).
`scrollBehavior`	`'instant' \| 'smooth' \| 'auto'`	`'instant'`	How the scroll happens when `scrollToTop` is `true` (ignored otherwise).
`onNavigate`	`() => Promise<void> \| void`	—	Callback executed after the history entry is pushed but before the new RSC payload is fetched. Use it to run custom analytics or side-effects.

Usage Examples

1
import { initClientNavigation } from "rwsdk/client";
2

3
initClientNavigation();

1
initClientNavigation({
2
  scrollBehavior: "smooth",
3
});

1
initClientNavigation({
2
  scrollToTop: false,
3
});

1
initClientNavigation({
2
  scrollBehavior: "auto",
3
  onNavigate: async () => {
4
    // e.g. send page-view to analytics before RSC fetch starts
5
    await myAnalytics.track(window.location.pathname);
6
  },
7
});

Rationale & Defaults

RedwoodSDK mirrors the behaviour of classic Multi Page Apps where each link click brings you back to the top of the next page. This is the most common expectation and is therefore the default. You can turn it off or make it smooth with a single option – no additional libraries required.