Valtio SSR brainstorming

[italodeandra]

Hi team, I'm currently brainstorming about the usage of valtio in NextJS (SSR). All the solutions I can find to have a reference goes around using the Context API.

I don't like using Context with valtio. For me it loses one of my main purposes of using valtio in the first place. I'm currently keeping valtio on client side only, but I really would like to change that.

I'm still doing some research and testing myself, I'll add it here when I find something. But does anyone have any insight on this? Anything we could discuss.

[italodeandra]

Okay. I recently asked myself if maybe someone would have mentioned SSR on this repo, but I'm still the only one.

For future reference, if anyone comes around this asking yourself how the f are you supposed to sync Valtio's SSR state, this is my method when using cookies:

Entire theme.state.ts file:

import { isBrowser } from "@italodeandra/ui/utils/isBrowser";
import pick from "lodash/pick";
import { setCookie } from "nookies";
import { proxy, snapshot, subscribe } from "valtio";

const themeState = proxy({
  isDark: false,
  toggle(isDark?: boolean) {
    themeState.isDark =
      typeof isDark === "boolean" ? isDark : !themeState.isDark;
  },
  hydrated: false,
});

subscribe(themeState, () => {
  setCookie(
    null,
    "theme",
    JSON.stringify(pick(snapshot(themeState), ["isDark"])),
    {
      path: "/",
      maxAge: 60 * 60 * 24 * 365,
    }
  );
});

export const hydrateThemeState = (cookies?: { theme?: string }): void => {
  if (!themeState.hydrated && cookies?.theme) {
    themeState.hydrated = isBrowser;
    Object.assign(themeState, JSON.parse(cookies.theme));
  }
};

Fragment of _app.tsx file:

import themeState, { hydrateThemeState } from "../src/theme.state";

const App: VFC<AppProps> = ({
  Component,
  pageProps,
}) => {
  hydrateThemeState(pageProps.cookies);

  const { isDark } = useSnapshot(themeState);

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )

So the main idea behind this is to hydrate the state using the data from pageProps. It will hydrate on both Server and Browser, but you should stop hydrating it when it reaches the browser (hence the line themeState.hydrated = isBrowser;) so your state doesn't get stuck with old data.

[mfellner]

What would you say are the unique challenges that valtio is facing with SSR? Is there a feature that other state management libraries have and that valtio is missing which would be helpful in this respect?

One challenge I found in the context of a React Native app was to initialise proxy state from an initial value (e.g. locally persisted state or in your case server-side state).

The factory pattern implemented in valtio-factory (discussed here: #348) allows for a clear separation of store (state) declaration and initialisation.

For example, you can declare your stores separately and run two different initialisation code paths for the server and the client side.

Since your question seems to be specific to Next.js, do you think it may be useful to add an example to their repository (https://github.com/vercel/next.js/tree/canary/examples)?

[Noitidart]

Ah thanks both! But why is context needed specifically for SSR, I'm slowly getting into SSR right now.

[dai-shi]

FYI: There's a long thread in zustand, reaching finally to providing zustand/context.

Oops, forgot to attach the link: pmndrs/zustand#182

[Noitidart]

Oh thanks that has all the content I need!

[wiesson]

What is the preferred way from getServerSideProps to a valtio state if I use nextjs?

[italodeandra]

What is the preferred way from getServerSideProps to a valtio state if I use nextjs?

Hi @wiesson, the idea of this discussion was to decide an answer for this very question. There is no preferred or best way. But here you can see my approach for it: #154 (comment)