Tool integration (more)
Feel free to reach out if you run into any issues integrating a tool.
Vanilla UI tools
To initialize UI vanilla tools (jQuery, tooltips, ...) you can use the onHydrationEnd()
hook.
Analytics
To inject external <script>
tags, you can use:
You can use the +client.js
file to initialize analytics code.
That way you can install tools such as Google Analytics, Plausible, or Segment.
You can also load and/or initialize analytics code only after the hydration ends by using the +onHydrationEnd hook.
Component libraries
Some component libraries need initialization, most notably vanilla component libraries such as Bootstrap.
To initialize code, you can use
To inject external scripts, you can use:
Examples:
Data fetching
Instead of using the +data
hook, you can use tools to fetch the page's initial data.
🧠The following explains how to integrate tools for fetching initial data. Instead of manually integrating tools yourself, we generally recommend using Vike extensions such as
vike-react-apollo
orvike-vue-query
.⚠️ We recommend using this advanced capability, which can be complex, only if you have a clear reason for avoiding potentially simpler options.
Some data-fetching tools enable you to fetch a page's initial data on a component-level instead of using the page-level Vike hook data()
On a high-level, the integration works like this:
- The initial data of a component is fetched while server-side rendering the component.
- 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 component's data is fetched where the component is loaded and executed.)
Some tools provide utilities to integrate more or less automatically. For example Apollo GraphQL provides many utilities to make integration easy.
A fully manual integration can be done as follows:
-
Determine the initial data on the server side (after SSR) and make it available as
pageContext.dataInitial
.You can configure/initialize the tool's client at
onBeforeRenderHtml()
:You can determine the initially fetched data at
onAfterRenderHtml()
:If you use React then you may also need to use
+Wrapper
: -
Make
pageContext.dataInitial
available to the client-side by usingpassToClient
. -
On the client-side, initialize with
pageContext.dataInitial
.Typically at
onBeforeRenderClient()
:
See also:
- Examples & Guides > Data fetching
- Guides > Data Fetching
- Tool Integration > Stores (State Management)
Service workers
You can use the +client.js
file to initialize service workers.
Without vike-{react,vue,solid}
You can manually integrate React/Vue/Solid (or any other UI framework) yourself:
You gain control not only over how React/Vue/Solid is integrated, but also how React/Vue/Solid tools are integrated.
See:
Since you control how your pages are rendered, you can use any tool you want without any restrictions.
- Any UI framework (React 16, React 17, Vue 2, Vue 3, petite-vue, Svelte, Solid, Preact, ...)
- Any UI library (Vuex, Redux, Pinia, Relay, Apollo GraphQL, Recoil, ...)
- Any CSS framework (Tailwind CSS, Bulma, Bootstrap, Material Design, ...)
- Any client-side library (Vanilla JS component libraries, Bugsnag, Sentry, jQuery, Google Analytics, ...)
- Any browser technology (Service Workers, PWA, ...)
- Etc.
The Vike extensions
vike-react
/vike-vue
/vike-solid
aim to be almost as flexible. If you reach a limitation you believe is caused byvike-{react,vue,solid}
then reach out before considering going for a manual integration.