removed scope from config; added pageClientStarted

package.json

@@ -32,6 +32,7 @@
     "node": ">=18.6.0"
   },
   "dependencies": {
+    "@effector/next": "^0.7.0",
     "@effector/reflect": "^9.2.0",
     "@fastify/accepts": "^4.3.0",
     "@fastify/compress": "^7.0.3",

pages/+Wrapper.tsx

@@ -1,11 +1,36 @@
 import type React from "react";
+import { useEffect, useRef } from "react";
 
-import { fork } from "effector";
-import { Provider } from "effector-react";
+import { EffectorNext } from "@effector/next";
+import { createEvent } from "effector";
+import { useUnit } from "effector-react";
 import { usePageContext } from "vike-react/usePageContext";
 
+const noop = createEvent();
+
+const Inner = () => {
+  const { config } = usePageContext();
+  const clientStartedRef = useRef(false);
+  const onClientStarted = useUnit(config.pageClientStarted ?? noop);
+
+  useEffect(() => {
+    if (!clientStartedRef.current && "pageClientStarted" in config) {
+      onClientStarted();
+      clientStartedRef.current = true;
+    }
+  }, []);
+
+  return <></>;
+};
+
 export default function WrapperEffector({ children }: { children: React.ReactNode }) {
-  const { scopeValues } = usePageContext();
+  const pageContext = usePageContext();
+  const { scopeValues } = pageContext;
 
-  return <Provider value={fork({ values: scopeValues })}>{children}</Provider>;
+  return (
+    <EffectorNext values={scopeValues}>
+      <Inner />
+      {children}
+    </EffectorNext>
+  );
 }

pages/example/@id/+Page.tsx

@@ -1,20 +1,21 @@
 import { useUnit } from "effector-react";
-import { clientOnly } from "vike-react/clientOnly";
 import { Link } from "~/shared/routing";
 
-import { $id } from "./model";
-
-const Component = clientOnly(() => import("./ClientComponent"));
+import { $random } from "../../index/model";
+import { $clientId, $id } from "./model";
 
 export function Page() {
   const id = useUnit($id);
+  const clientId = useUnit($clientId);
+  const random = useUnit($random);
 
   return (
     <div>
       <h1>Example</h1>
       <p>Read parameter from route: {id}</p>
       <p>
-        Client id: <Component fallback="loading..." />
+        Client id: {clientId}
+        random: {random}
       </p>
       <Link href="/">Go home</Link>
     </div>

renderer/+config.ts

@@ -17,10 +17,6 @@ export default {
     pageClientStarted: {
       env: { client: true, server: false },
     },
-    // https://effector.dev/en/api/effector/scope/
-    scope: {
-      env: { client: true, server: true },
-    },
   },
 
   // https://vike.dev/extends

renderer/+onBeforeRenderClient.ts

@@ -8,9 +8,8 @@ export async function onBeforeRenderClient(pageContext: Vike.PageContext) {
 
   const pageClientStarted = pageContext.config.pageClientStarted;
 
-  if (pageClientStarted) {
+  if (pageClientStarted && !pageContext.isHydration) {
     await allSettled(pageClientStarted, { scope });
+    pageContext.scopeValues = serialize(scope);
   }
-
-  pageContext.scopeValues = serialize(scope);
 }