Data Tools

In principle, you can use Vike with any data utility. For example:

Initial data

Some data tools allow you to fetch the initial data of the page on a component-level, instead of using the page-level Vike hook data().

Generally, on a high-level, the integration works in two steps:

  1. The initial data of a component is fetched while server-side rendering the component.
  2. The initial data is serialized and passed to the client. (So that the client uses the exact same data, avoiding double-fetching and hydration mismatches.)

If SSR is disabled, then the data is only fetched on the client-side. (The data of a component is fetched where the component is loaded and executed.)

Depending on the tool, this integration is done (semi-)automatically. A fully manual integration can be done using Vike primitives:
  1. Fetch the initial SSR data on the server-side.

    For example in onBeforeRender(), or onRenderHtml() if you don't use vike-react/vike-vue/vike-solid.

  2. Make the initial SSR data available as pageContext.initialData.

    See API > pageContext > Custom.

  3. Make pageContext.initialData available on the client-side.

    See API > passToClient.

  4. Initialize your data fetching tool on the client-side with pageContext.initialData.

    For example in onBeforeRenderClient(), or onRenderClient() if you don't use vike-react/vike-vue/vike-solid.

See also