Nextjs ssr

babel.config.js

module.exports = (api) => {
  api.cache.using(() => process.env.NODE_ENV);

  return {
    presets: ["next/babel"],
    plugins: [["effector/babel-plugin", { reactSsr: true }]],
  };
};

get-initial-props.ts

import { fork, allSettled, serialize, Unit } from "effector";

export async function getInitialState<P>(unit: Unit<P>, params?: P) {
  const scope = fork();

  await allSettled(unit, { scope, params });

  const initialState = serialize(scope);

  return { scope, props: { initialState } };
}

page.tsx

import { createStore, createEvent } from "effector";

const pageRequested = createEvent<GetServerSidePropsContext>();
const $is404 = createStore(false);

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { props, scope } = await getInitialState(pageRequested, context);

  return { props, notFound: scope.getState($is404) };
}

with-scope.tsx

import { fork, serialize, Scope } from "effector";
import { Provider } from "effector-react/ssr";
import { ComponentType } from "react";
import { AppProps } from "next/app";

interface InitialState {
  initialState?: Object;
}

export function withScope() {
  const isServer = typeof window === "undefined";
  let clientScope: Scope;

  return (Component: ComponentType<AppProps<InitialState>>) => {
    return (props: AppProps<InitialState>) => {
      // prettier-ignore
      const { pageProps: { initialState = {} } } = props;

      const scope = fork({
        values: {
          ...(clientScope ? serialize(clientScope) : {}),
          ...initialState,
        },
      });

      if (!isServer) clientScope = scope;

      return (
        <Provider value={scope}>
          <Component {...props} />
        </Provider>
      );
    };
  };
}