vike-lite-solid

Vike Lite Solid

The official SolidJS integration for vike-lite. It provides seamless Server-Side Rendering (SSR), Static Site Generation (SSG), and client hydration out of the box, with a focus on minimalism and performance.

⚙️ Install

You need to install both vike-lite-solid and the official Vite plugin for SolidJS (vite-plugin-solid).

# npm
npm install -D vike-lite-solid vite-plugin-solid
npm install solid-js

# pnpm
pnpm add -D vike-lite-solid vite-plugin-solid
pnpm add solid-js

# yarn
yarn add -D vike-lite-solid vite-plugin-solid
yarn add solid-js

🛠️ Vite Plugin

Add the plugin to your vite.config.

// vite.config.ts
import type { UserConfig } from 'vite'
import vikeLite from 'vike-lite/vite'
import vikeLiteSolid from 'vike-lite-solid/vite'

export default {
  plugins: [
    vikeLite(),
    vikeLiteSolid({
      // Default is `true` that enables SolidJS Hydration
      // Set to `false` for Client Takeover (SPA mode)
      hydration: true,
      // Default is `true` that enables HTML Streaming
      streaming: true
      // Advanced: pass options directly to the underlying vite-plugin-solid
      solid: {
        babel: {
          plugins: [
            // e.g. add custom babel plugins
          ]
        }
      }
    })
  ]
} satisfies UserConfig

Option	Type	Default	Description
hydration	boolean	true	When true, the server renders the page to HTML and the client hydrates it. When false, the client discards the server-rendered HTML on load and mounts a fresh tree — useful for highly interactive pages where paying the hydration-mismatch tax isn't worth it.
streaming	boolean	true	When true, streams the server-rendered app markup via the Web Streams API (ReadableStream, using solid-js/web's renderToStream) instead of buffering it into a single string before sending the response. Works identically on Node.js, Deno, Bun and Edge runtimes. Ignored when hydration: false (Client Takeover has no server-rendered app markup to stream).
solid	Options (from vite-plugin-solid)	{}	Passed through to the underlying vite-plugin-solid instance. Use this for custom Babel plugins or any other low-level Solid compiler setting.

🪝 Hooks

useData

Access the data fetched by your +data functions directly inside your Solid components.

// /pages/+Page.tsx
import type { Component } from 'solid-js'
import { useData } from 'vike-lite-solid'

type MyData = {
  title: string
}

const Page: Component = () => {
  const [data, setData] = useData<MyData>()

  return (
    <div>
      <h1>{data.title}</h1>
      <button onClick={() => setData('title', 'Updated Title!')}>
        Update Data
      </button>
    </div>
  )
}

export default Page

💡 Note: Unlike vike-solid (which currently only returns a getter), the useData hook in vike-lite-solid returns a tuple [data, setData]. This allows you to easily mutate the data locally. (vike-solid is currently waiting on the PR for this feature).

usePageContext

Access the current page context, including URL parameters, original pathname, and route information.

// /pages/+Page.tsx
import type { Component } from 'solid-js'
import { usePageContext } from 'vike-lite-solid'

const Page: Component = () => {
  const pageContext = usePageContext()

  return (
    <div>
      <p>Current Path: <strong>{pageContext.urlPathname}</strong></p>
    </div>
  )
}

export default Page

useHydrated

Detect whether the application has successfully hydrated on the client. Essential for wrapping client-only libraries (like chart tools or window-dependent logic) to avoid SSR hydration mismatches.

// /pages/+Page.tsx
import { useHydrated } from 'vike-lite-solid'
import { Show } from 'solid-js'
import ClientOnlyChart from './Chart'

export default function Page() {
  const hydrated = useHydrated()

  return (
    <div>
      <h1>Statistics</h1>
      <Show fallback={<p>Loading chart…</p>} when={hydrated()}>
        <ClientOnlyChart />
      </Show>
    </div>
  )
}

useUrl

// /pages/+Page.tsx
import type { Component } from 'solid-js'
import { useUrl } from 'vike-lite-solid'

const Page: Component = () => {
  const url = useUrl()

  return (
    <div>
      <p>Current Query Parameter "myQueryParam": <strong>{url.searchParams.get('myQueryParam')}</strong></p>
    </div>
  )
}

export default Page

💡 Note: Unlike vike-solid (which currently use pageContext.urlParsed), vike-lite-solid uses the useUrl hook that is granular and is the result of new URL().

Differences: vike-solid vs vike-lite-solid

Why choose vike-lite? It's built to be as minimal and fast as possible. Here are the main architectural differences regarding the SolidJS integration:

Feature	vike-solid	vike-lite-solid	Why it matters
Reactivity Architecture	Single Source of Truth	Separation of Concerns	vike-solid serializes everything into a single massive pageContext. vike-lite separates the reactive state into 2 distinct entities (pageContextStore and view), taking advantage of Solid's batch() for blazing-fast atomic updates.
Accessibility (A11y)	Not handled by default	Automatic handled	After a client-side navigation, vike-lite-solid moves the focus away from the clicked <a> tag by focusing #root. This significantly improves UX for keyboard navigation and screen readers.
useData() Hook	getter only	[getter, setter]	vike-lite-solid allows you to mutate the route data locally without needing other state managers.
URL parsed	pageContext.urlParsed	useUrl()	A dedicated hook, consistent with vike-lite-solid

---

This project is licensed under the MIT License.