[SSR] Multiple factory error handling

CHANGES.txt

@@ -1,3 +1,7 @@
+1.11.0 (January 11, 2023)
+ - Updated the `SplitFactory` component provider to support server-side rendering (Related to issue #11 and #109). See our documentation for more details: https://help.split.io/hc/en-us/articles/360038825091-React-SDK#server-side-rendering
+ - Updated internal code to remove a circular dependency and avoid warning messages with tools like PNPM (Related to issue #176).
+
 1.10.2 (December 12, 2023)
  - Updated @splitsoftware/splitio package to version 10.24.1 that updates localStorage usage to clear cached feature flag definitions before initiating the synchronization process, if the cache was previously synchronized with a different SDK key (i.e., a different environment) or different Split Filter criteria, to avoid using invalid cached data when the SDK is ready from cache.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "1.10.3-rc.0",
+  "version": "1.10.3-rc.1",
   "description": "A React library to easily integrate and use Split JS SDK",
   "main": "lib/index.js",
   "module": "es/index.js",

src/SplitFactory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { SplitComponent } from './SplitClient';
 import { ISplitFactoryProps } from './types';
 import { WARN_SF_CONFIG_AND_FACTORY, ERROR_SF_NO_CONFIG_AND_FACTORY } from './constants';
-import { getSplitFactory, destroySplitFactory, IFactoryWithClients, getSplitClient } from './utils';
+import { getSplitFactory, destroySplitFactory, IFactoryWithClients, getSplitClient, isServerEnvironment } from './utils';
 import { DEFAULT_UPDATE_OPTIONS } from './useSplitClient';
 
 /**
@@ -30,6 +30,14 @@ export class SplitFactory extends React.Component<ISplitFactoryProps, { factory:
 
     let { factory, config } = props;
 
+    // At the moment, SSR is supported only with the SDK running in the client. So, it cannot create or use a factory in server-side, to avoid instantiating a factory per request/session.
+    if (isServerEnvironment) {
+      // @TODO Remove when SSR is supported with the SDK running in the server (initialState prop)
+      factory = undefined;
+      // @TODO Remove when SplitFactory component creates the factory in the commit phase (breaking change)
+      config = undefined;
+    }
+
     // Instantiate factory
     if (!factory && config) {
       // We use an idempotent variant of the Split factory builder (i.e., given the same config, it returns the same already

src/types.ts

@@ -45,12 +45,19 @@ export interface ISplitStatus {
 export interface ISplitContextValues extends ISplitStatus {
 
   /**
-   * Split factory instance
+   * Split factory instance.
+   *
+   * NOTE: This property is not recommended for direct use, as better alternatives are available.
+   * It should not be used for server-side rendering, since it is null on the server and might cause a hydration mismatch.
    */
   factory: SplitIO.IBrowserSDK | null;
 
   /**
-   * Split client instance
+   * Split client instance.
+   *
+   * Caveat: This property is not recommended for direct use, as better alternatives are available.
+   * It should not be used for server-side rendering, since it is null on the server and might cause a hydration mismatch.
+   *
    * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#2-instantiate-the-sdk-and-create-a-new-split-client}
    */
   client: SplitIO.IBrowserClient | null;

src/utils.ts

@@ -205,3 +205,14 @@ function evaluateFeatureFlags(client: SplitIO.IBrowserClient | null, _lastUpdate
       getControlTreatmentsWithConfig(names) :
       {} // empty object when evaluating with flag sets and client is not ready
 }
+
+// Utils based on https://github.com/alex-cory/use-ssr and https://github.com/facebook/react/blob/main/packages/shared/ExecutionEnvironment.js
+const canUseDOM: boolean = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+const canUseNative: boolean = typeof navigator != 'undefined' && navigator.product == 'ReactNative'
+
+export const isServerEnvironment = !canUseDOM && !canUseNative