Merge pull request #44 from nabla-studio/DavideSegullo/improve-next_ssr

Davide segullo/improve next ssr

examples/nextjs/components/provider.tsx

@@ -2,7 +2,7 @@
 
 import { osmosis, osmosisAssetList } from '@nabla-studio/chain-registry';
 import { QuirksConfig, QuirksNextProvider } from '@quirks/react';
-import { type Config, ssrPersistOptions } from '@quirks/store';
+import { type Config } from '@quirks/store';
 import {
   xdefiExtension,
   keplrExtension,
@@ -22,7 +22,6 @@ const config: Config = {
   ],
   chains: [osmosis /* bitsong */],
   assetsLists: [osmosisAssetList /* bitsongAssetList */],
-  persistOptions: ssrPersistOptions,
   walletConnectOptions: {
     providerOpts: {
       logger: 'info',
@@ -39,8 +38,8 @@ const config: Config = {
 
 export const Provider = ({ children }: PropsWithChildren<unknown>) => {
   return (
-    <QuirksConfig config={config}>
-      <QuirksNextProvider>{children}</QuirksNextProvider>
-    </QuirksConfig>
+    <QuirksNextProvider>
+      <QuirksConfig config={config}>{children}</QuirksConfig>
+    </QuirksNextProvider>
   );
 };

packages/react/src/providers/next.tsx

@@ -1,25 +1,15 @@
-import { QuirksConfigContext } from './config';
-import { type PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { type PropsWithChildren, useSyncExternalStore } from 'react';
 
-export const QuirksNextProvider = (props: PropsWithChildren<unknown>) => {
-  const { children } = props;
-  const store = useContext(QuirksConfigContext);
-  const [hydrated, setHydrated] = useState(false);
+export const emptySubscribe = () => () => {};
 
-  if (!store) {
-    throw new Error(
-      ['`QuirksNextProvider` must be used within `QuirksConfig`.'].join('\n'),
-    );
-  }
+export const QuirksNextProvider = ({
+  children,
+}: PropsWithChildren<unknown>) => {
+  const isServer = useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  );
 
-  useEffect(() => {
-    store.persist.rehydrate();
-    setHydrated(true);
-  }, [store.persist]);
-
-  if (!hydrated) {
-    return null;
-  }
-
-  return children;
+  return isServer ? null : children;
 };

packages/store/src/configs/default.ts

@@ -19,5 +19,4 @@ export const defaultPersistOptions: PersistOptions<AppState> = {
         ([key]) => !excludedKeys.includes(key as keyof AppState),
       ),
     ) as AppState,
-  skipHydration: true,
 };

packages/store/src/store.ts

@@ -146,16 +146,24 @@ export const createConfig = (config: Config) => {
    * We should inject wallet when walletName, is necessary because 'Wallet' is a class,
    * when it is serialized it loses methods, so we could not call wallet functionality.
    */
-  const unsub = store.persist?.onFinishHydration((state) => {
+  if (!store.persist.getOptions().skipHydration) {
+    const state = store.getState();
+
     if (state.walletName && !state.wallet && autoConnect) {
       store.getState().reconnect(state.walletName);
-
-      /**
-       * Do once, cleanup onFinishHydration to avoid useless event subscription.
-       */
-      unsub();
     }
-  });
+  } else {
+    const unsub = store.persist?.onFinishHydration((state) => {
+      if (state.walletName && !state.wallet && autoConnect) {
+        store.getState().reconnect(state.walletName);
+
+        /**
+         * Do once, cleanup onFinishHydration to avoid useless event subscription.
+         */
+        unsub();
+      }
+    });
+  }
 
   return store;
 };