Skip to main content

SSR

This section explains how to use Stan with SSR across different frameworks.

React / Next.js​

While Stan can work in provider-less mode (in which it simply uses the DEFAULT_STORE), one needs a way to scope and isolate state per request during server-side rendering. That can be done via wrapping the root of the app (app/layout.tsx) in StanProvider:

import { StanProvider } from '@rkrupinski/stan/react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StanProvider>{children}</StanProvider>
      </body>
    </html>
  );
}

Vue / Nuxt​

The same applies to Vue: to scope and isolate state per request during server-side rendering, wrap the root of your app in StanProvider - or call provideStan in its setup():

<script setup lang="ts">
import { StanProvider } from '@rkrupinski/stan/vue';
</script>

<template>
  <StanProvider>
    <slot />
  </StanProvider>
</template>

Or, equivalently:

<script setup lang="ts">
import { provideStan } from '@rkrupinski/stan/vue';

provideStan();
</script>

<template>
  <slot />
</template>

See also​