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 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 usingvike-react
instead, see Vike extension VS custom integration.⚠️ We recommend using such advanced Vike functionality, which can be complex to use, only if you have a clear reason why you don't want to use potentially easier alternatives.
Official examples:
- /boilerplates/boilerplate-react-ts - Classic integration, using Client Routing.
- /examples/react-minimal - Minimalistic integration, using Server Routing.
vike-react
source code - Full-featured integeration.- /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 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, avike-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.