/pages/product/+config.js
# SSR pages
/pages/product/@id/+Page.js         # URL: /product/42 
/pages/product/@id/buy/+Page.js     # URL: /product/42/buy
 
/pages/admin/+config.js
# SPA pages (i.e. SSR disabled)
/pages/admin/products/+Page.js      # URL: /admin/products
/pages/admin/users/+Page.js         # URL: /admin/users 
 
/pages/(marketing)/+config.js
# SSG pages (i.e. pre-rendering)
/pages/(marketing)/index/+Page.js   # URL: / 
/pages/(marketing)/about/+Page.js   # URL: /about 

// /pages/product/+config.js
// » config for product pages: /pages/product/**/+Page.js
export default {
  ssr: true
}

// /pages/admin/+config.js
// » config for admin pages: /pages/admin/**/+Page.js
export default {
  ssr: false // => SPA
}

// /pages/(marketing)/+config.js
// » config for marketing pages: /pages/(marketing)/**/+Page.js
export default {
  prerender: true // aka SSG
}

// Powered by vike-react-query
 
import { useSuspenseQuery } from '@tanstack/react-query'
 
const Movie = ({ id }) => {
  const result = useSuspenseQuery({
    queryKey: ['movie', id],
    queryFn: () =>
      fetch(`https://swapi.info/api/films/${id}`)
      .then((res) => res.json())
  })
 
  const { title } = result.data
 
  return (
    <div>
      Title: <b>{title}</b>
    </div>
  )
}

// Powered by vike-react-apollo
 
import { useSuspenseQuery, gql } from '@apollo/client'
 
const Countries = () => {
  const { data } = useSuspenseQuery(gql`
    {
      countries {
        code
        name
      }
    }
  `)
 
  return (
    <ul>
      {data.countries.map((country) => (
        <li key={country.code}>{country.name}</li>
      ))}
    </ul>
  )
}

// /pages/movie/@id/+data.server.js
// Environment: server
 
export async function data(pageContext) {
  const { id } = pageContext.routeParams
  // Fetching data on the server-side
  const movie = await Movie.find({ where: { id } })
  return { movie }
}

// /pages/movie/@id/+data.client.js
// Environment: client
 
export async function data(pageContext) {
  const { id } = pageContext.routeParams
  // Fetching data on the client-side
  const movie = await (
    await fetch(`https://swapi.info/api/films/${id}`)
  ).json()
  return { movie }
}

// /pages/+onCreateGlobalContext.server.js
// Environment: server
 
export async function onCreateGlobalContext() {
  globalContext.someServerData = await fetchSomeData()
}

// /pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext() {
  globalContext.someClientData = await fetchSomeData()
}

import { getGlobalContext } from 'vike'
const { someGlobalData } = await getGlobalContext()

// /pages/admin/+guard.js
// Applies to all admin pages: /pages/admin/**/+Page.js
 
import { render } from 'vike/abort'
 
export async function guard(pageContext) {
  if (!pageContext.user.isAdmin) {
    throw render(401, "Access forbidden")
  }
}

// pages/+onHookCall.server.js
// Environment: server
 
// Called whenever a Vike hook is executed.
 
export async function onHookCall(hook, pageContext) {
  console.log('before', hook.name, hook.filePath)
  await hook.call()
  console.log('after', hook.name, hook.filePath)
}

import { renderPage } from 'vike/server'
 
// Any server: Hono, Express.js, Cloudflare Worker, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    const { body, statusCode } = pageContext.httpResponse
    const response = { body, statusCode }
    return response
  }
})

// pages/+onBeforeRoute.js
 
export function onBeforeRoute(pageContext) {
  console.log(pageContext.urlOriginal) // /de-DE/filme
  const ret = extractLocale(pageContext.urlOriginal)
  const { urlWithoutLocale, locale } = ret
  console.log(locale) // de-DE
  console.log(urlWithoutLocale) // /movie
  // Make locale available as pageContext.locale
  pageContext.locale = locale
  // Vike's router will use pageContext.urlLogical
  // instead of pageContext.urlOriginal
  pageContext.urlLogical = urlWithoutLocale
}

import {
  // Same as Zustand's create() but with
  // seamless SSR integration
  create
} from 'vike-react-zustand'
 
interface Store {
  counter: number
  increment: () => void
}
 
export const useStore = create()((set) => ({
  counter: 0,
  increment: () => set((state) =>
    ({ counter: state.counter + 1 })
  )
}))