React

`vike-react`

We recommend using vike-react which integrates React in a full-fledged manner.

Use vike.dev/new to scaffold a new Vike app that uses vike-react.

You can also integrate React yourself if you want full control over React integration.

Custom integration

Instead of using vike-react, you can implement your own React integration for full control over the integration of React and React libraries.

🧠
Custom integrations can be complex and we generally recommend using vike-react instead.

👉 That said, a custom integration can make sense in following scenarios:
You are building an app with a simple architecture.
For example https://vike.dev has a simple architecture — it uses a custom integration.
You can read the source code of vike-react — it's small! — and check whether you need most of the code. If you do then it probably makes sense to use vike-react.
You are using vike-react but ran into a blocker.
Before migrating away from vike-react, we recommend discussing it with the maintainers to explore your options.
See also: Vike extension VS custom integration.

You can use vike.dev/new/core to scaffold a Vike app showcasing a manual React integration.

Official examples:

/packages/create-vike-core/boilerplate-react-ts - Classic integration, using Client Routing.
/examples/react-minimal - Minimalistic integration, using Server Routing.
vike-react source code - Full-fledged integration.
/examples/render-modes - Integration supporting all render modes (SSR, SPA, and HTML-only).

For more official examples, see GitHub > vikejs/vike > examples/.

Community examples:

2023.12 GitHub > luisfloat/vike-island-example - Islands Architecture implementation, mixing React and Vue.

For more community examples, see integration guides such as TanStack Query.

React Server Components

React Server Components (RSC) is a new application architecture designed by the React team.

Vike has experimental support for Server Components via vike-react-rsc.

If you use vike-react, use RPC instead of Server Functions (aka Server Actions).

Telefunc is an RPC implementation with minimal boilerplate similar to Server Functions.

Vike fully supports Progressive Rendering (HTML streaming) which can be used also without Server Components.