React

vike-react

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

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

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

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:

  • ✅ Server Actions
  • ✅ Progressive Rendering
  • 🚧 Server Components

Vike supports Progressive Rendering as well as Server Actions. Server Components is work-in-progress.

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'.

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.

Without Vike extension

Instead of using a Vike extension, you can manually integrate React yourself and have full control over the integration of not only React itself but also React libraries.

Official examples:

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

Community examples:

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

See also