Vike: Uma alternativa ao Next.js

Há muito tempo venho criando sites utilizando Next.js, e há algum tempo atrás eu participei em um projeto onde se utilizava React com Vite (porem sem o SSR). Utilizando as mesmas bibliotecas front-end que eu utilizava com o Next.js, eu percebi que o tempo de build com o Vite era muito menor do que usando o Next.js, então decidi buscar alternativas com Server Side Rendering mais rápidas do que o Next.js para criar sites em React.

Rapidamente encontrei nesta postagem do Reddit comentários sugerindo o vite-plugin-ssr, que mudou seu nome para Vike.

Logo do Vike

Eu testei ele e fiquei impressionado como o Vike é incrível. Aqui estão alguns pontos que gostei:

Suporte a variados frameworks

Ele suporta vários frameworks além do React, como Vue.js, Svelte, Solid. Neste link há uma comparação entre o Vike e o Next.js.

Data fetching

O Vike utiliza hooks para acessar os dados retornados do servidor, ao invés deles serem passados por props como no Next.js, facilitando o acesso aos dados pelos componentes.

// /pages/products/+data.ts

export async function data(pageContext) {
  const products = await fetchProducts()
  return { products }
}

export type Products = Awaited<ReturnType<typeof data>>

// /components/products/list.ts

import { useData } from 'vike-react/useData'
import type { Products } from '../../pages/products/+data'

export function ProductList() {
  const { products } = useData<Products>()
}

Tags `<a>` funcionam com o client-side routing

Ele não precisa de um componente externo como o <Link> do Next.js para alternar as páginas sem recarregar, pode ser usado as tags <a>.

// Next.js
<Link href="/">Link</Link>

// Vike
<a href="/">Link</a>

Hooks

O Vike possui vários hooks para manipular rotas. Por exemplo, o guard() permite proteger páginas contra acesso não autorizado, onBeforeRender() pode ser útil para buscar dados do servidor antes de renderizar cada página (como dados de um usuário autenticado, por exemplo).

Organização de arquivos

Ele possui arquivos separados para funções específicas das páginas, como +Layout.tsx para criação de layouts, +Head.tsx para definir os metadados da página (muito útil para SEO), +Wrapper.tsx para os providers, +title para definir o título da página, +data para obter dados do servidor, entre outros.

Rápido

Enquanto eu utilizava, percebi que o HMR dele é um pouco mais rápido que o Next.js. Eu criei um mesmo projeto básico com Chakra UI utilizando o Vike e o Next.js e medi o tempo de build e o máximo de RAM utilizado, através da ferramenta "time" do Linux. Os resultados foram os seguintes:

Framework	Tempo de build	Máximo de RAM durante o build
Next.js	72.56s	825.7MB
Vike	15.8s	419.4MB

Além desses há muitos outros recursos, que podem ser encontrados no site
https://vike.dev/

Gostaria de saber se alguém já utilizou o Vike, e qual foi sua experiência 😉