Search
Docs Menu
API
Get Started

vike-react

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

You can use Bati to scaffold a Vike app that uses vike-react.

You can also integrate React yourself if you want full control over the 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, see Vike extension VS custom integration.

⚠️ We recommend using such advanced capability, which can be complex to use, only if you have a clear reason why simpler alternatives aren't an option for you.

Official examples:

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

Community examples:

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

React Server Components

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

The design can be broken down into three parts:

  • ✅ RPC (Server Actions)
  • ✅ Progressive Rendering
  • 🚧 Server Components

Vike already supports Progressive Rendering as well as RPC.

Instead of using Server Actions using 'use server', we recommend using Telefunc which we believe to be a superior design. That said, a vike-react fork can be developed that supports 'use server'.

Being able to integrate Server Components is work-in-progress.

While we are thrilled about Server Components, we believe it isn't production ready yet.

There are multiple reasons for that. For example, use cases that are essential such as infinite scroll aren't supported yet, RFC: injectToStream is a major blocker, and there doesn't seem to be a clear recommendation (yet) where to set the 'use client' boundaries (minimizing the number of client components is, counterintuitively, not always the best strategy).

Also, while the added value of Server Components which is to reduce the size of client-side bundles is definitely a nice-to-have, we believe the slight performance gain isn't worth the added DX complexity. We are hopeful this is going to change as the Server Components design matures: several React frameworks are experimenting and pushing the Server Components design forward. In the meantime, we recommend sticking to the classic and battle tested SSR/SPA/SSG approach (with Vike you can toggle SSR and toggle SSG).

The most significant added value of the RSC architecture is its novel approach to SSR streaming which unlocks many exciting features around data fetching. Not only does Vike has first-class support for SSR streaming, but it also supports it in a unique way that enables both an easy DX as well as flexibility: you can integrate tools with the SSR stream manually yourself (e.g. using react-streaming), or you can use built-in integrations such as vike-react-query and Telefunc.

SSR streaming enables you to define components that can fetch data, while each of these data-fetching components are loaded and rendered independently of each other: the user sees a UI with non-data-fetching parts that are rendered quickly, and data-fetching parts that are rendered as data comes in. This leads to a significantly improved (perceived) page speed. See Progressive Rendering.

See also Overview > Next.js Comparison > React Server Components.

See also