diff --git a/docs/site/src/components/API/api-ref/networkselect.js b/docs/site/src/components/API/api-ref/networkselect.js
index a829efce98e..17756bf0720 100644
--- a/docs/site/src/components/API/api-ref/networkselect.js
+++ b/docs/site/src/components/API/api-ref/networkselect.js
@@ -3,57 +3,56 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useState, useEffect } from "react";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
 import { StyledEngineProvider } from "@mui/material/styles";
 
 const NETWORKS = ["Devnet", "Testnet", "Mainnet"];
 
 const NetworkSelect = () => {
-  const [selection, setSelection] = useState(() => {
-    if (ExecutionEnvironment.canUseDOM) {
-      const network = localStorage.getItem("RPC");
-      if (network === null) {
-        return "mainnet";
-      }
-      return localStorage.getItem("RPC");
-    } else {
-      return "mainnet";
-    }
-  });
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        const [selection, setSelection] = useState(() => {
+          const network = localStorage.getItem("RPC");
+          return network !== null ? network : "mainnet";
+        });
 
-  useEffect(() => {
-    localStorage.setItem("RPC", selection);
-    window.dispatchEvent(new Event("storage"));
-  }, [selection]);
+        useEffect(() => {
+          localStorage.setItem("RPC", selection);
+          window.dispatchEvent(new Event("storage"));
+        }, [selection]);
 
-  const handleChange = (e) => {
-    setSelection(e.target.value);
-  };
+        const handleChange = (e) => {
+          setSelection(e.target.value);
+        };
 
-  return (
-    <StyledEngineProvider injectFirst>
-      <div className="w-11/12 pb-3">
-        <FormControl fullWidth>
-          <InputLabel
-            id="network"
-            className="dark:text-white"
-          >{`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}</InputLabel>
-          <Select
-            label-id="network"
-            id="network-select"
-            value={selection}
-            label={`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}
-            onChange={handleChange}
-            className="dark:text-white dark:bg-iota-ghost-dark"
-          >
-            <MenuItem value="devnet">{NETWORKS[0]}</MenuItem>
-            <MenuItem value="testnet">{NETWORKS[1]}</MenuItem>
-            <MenuItem value="mainnet">{NETWORKS[2]}</MenuItem>
-          </Select>
-        </FormControl>
-      </div>
-    </StyledEngineProvider>
+        return (
+          <StyledEngineProvider injectFirst>
+            <div className="w-11/12 pb-3">
+              <FormControl fullWidth>
+                <InputLabel
+                  id="network"
+                  className="dark:text-white"
+                >{`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}</InputLabel>
+                <Select
+                  label-id="network"
+                  id="network-select"
+                  value={selection}
+                  label={`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}
+                  onChange={handleChange}
+                  className="dark:text-white dark:bg-iota-ghost-dark"
+                >
+                  <MenuItem value="devnet">{NETWORKS[0]}</MenuItem>
+                  <MenuItem value="testnet">{NETWORKS[1]}</MenuItem>
+                  <MenuItem value="mainnet">{NETWORKS[2]}</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+          </StyledEngineProvider>
+        );
+      }}
+    </BrowserOnly>
   );
 };
 
diff --git a/docs/site/src/components/API/index.js b/docs/site/src/components/API/index.js
index b32313d27a9..f2c1389f9f0 100644
--- a/docs/site/src/components/API/index.js
+++ b/docs/site/src/components/API/index.js
@@ -3,11 +3,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useState, useEffect } from "react";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import Heading from "@theme/Heading";
 import RefNav from "./api-ref/refnav";
 import Methods from "./api-ref/method";
-
 import ScrollSpy from "react-ui-scrollspy";
 
 // TODO: Once the repo is public, we can use the old imports again and reactivate the ../../utils/getopenrpcspecs.js script
@@ -20,89 +19,87 @@ export function getRef(url) {
 }
 
 const Rpc = () => {
-  const [openrpc, setOpenRpc] = useState(() => {
-    if (ExecutionEnvironment.canUseDOM) {
-      const network = localStorage.getItem("RPC");
-      switch (network) {
-        case "mainnet":
-          return openrpc_mainnet;
-        case "testnet":
-          return openrpc_testnet;
-        case "devnet":
-          return openrpc_devnet;
-        default:
-          return openrpc_mainnet;
-      }
-    } else {
-      return openrpc_mainnet;
-    }
-  });
-  const [openDropdown, setOpenDropdown] = useState(null);
+  return (
+    <BrowserOnly fallback={<p>Loading...</p>}>
+      {() => {
+        const [openrpc, setOpenRpc] = useState(() => {
+          const network = localStorage.getItem("RPC");
+          switch (network) {
+            case "mainnet":
+              return openrpc_mainnet;
+            case "testnet":
+              return openrpc_testnet;
+            case "devnet":
+              return openrpc_devnet;
+            default:
+              return openrpc_mainnet;
+          }
+        });
 
-  useEffect(() => {
-    const rpcswitch = () => {
-      if (localStorage.getItem("RPC")) {
-        switch (localStorage.getItem("RPC")) {
-          case "mainnet":
-            setOpenRpc(openrpc_mainnet);
-            break;
-          case "testnet":
-            setOpenRpc(openrpc_testnet);
-            break;
-          case "devnet":
-            setOpenRpc(openrpc_devnet);
-            break;
-          default:
-            setOpenRpc(openrpc_mainnet);
-        }
-      } else {
-        setOpenRpc(openrpc_mainnet);
-      }
-    };
+        const [openDropdown, setOpenDropdown] = useState(null);
 
-    window.addEventListener("storage", rpcswitch);
+        useEffect(() => {
+          const rpcswitch = () => {
+            const network = localStorage.getItem("RPC");
+            switch (network) {
+              case "mainnet":
+                setOpenRpc(openrpc_mainnet);
+                break;
+              case "testnet":
+                setOpenRpc(openrpc_testnet);
+                break;
+              case "devnet":
+                setOpenRpc(openrpc_devnet);
+                break;
+              default:
+                setOpenRpc(openrpc_mainnet);
+            }
+          };
 
-    return () => {
-      window.removeEventListener("storage", rpcswitch);
-    };
-  }, [openrpc]);
+          window.addEventListener("storage", rpcswitch);
+          return () => {
+            window.removeEventListener("storage", rpcswitch);
+          };
+        }, []);
 
-  const apis = [
-    ...new Set(openrpc["methods"].map((api) => api.tags[0].name)),
-  ].sort();
-  const schemas = openrpc.components.schemas;
+        const apis = [
+          ...new Set(openrpc["methods"].map((api) => api.tags[0].name)),
+        ].sort();
+        const schemas = openrpc.components.schemas;
 
-  if (!openrpc) {
-    return <p>Open RPC file not found.</p>;
-  }
+        if (!openrpc) {
+          return <p>Open RPC file not found.</p>;
+        }
 
-  let ids = [];
-  openrpc["methods"].map((method) => {
-    ids.push(method.name.replaceAll(/\s/g, "-").toLowerCase());
-  });
+        let ids = openrpc["methods"].map((method) =>
+          method.name.replaceAll(/\s/g, "-").toLowerCase()
+        );
 
-  return (
-    <div className="mx-4 flex flex-row">
-      <div className="pt-12 w-[290px] mb-24 flex-none max-h-screen overflow-y-auto sticky top-12" style={!openDropdown ? {borderRight:'1px solid #444950'}:{}}>
-        <RefNav json={openrpc} apis={apis} openDropdown={openDropdown} setOpenDropdown={setOpenDropdown}/>
-      </div>
+        return (
+          <div className="mx-4 flex flex-row">
+            <div className="pt-12 w-[290px] mb-24 flex-none max-h-screen overflow-y-auto sticky top-12" style={!openDropdown ? { borderRight: '1px solid #444950' } : {}}>
+              <RefNav json={openrpc} apis={apis} openDropdown={openDropdown} setOpenDropdown={setOpenDropdown} />
+            </div>
 
-      <main className="flex-grow w-3/4">
-        <div className="mx-8">
-          <div className="">
-            <Heading as="h1" className=" w-full py-4 top-14">
-              IOTA JSON-RPC Reference - Version: {openrpc.info.version}
-            </Heading>
-            <ScrollSpy>
-              <div className="">
-                <p>{openrpc.info.description}</p>
-                <Methods json={openrpc} apis={apis} schemas={schemas} />
+            <main className="flex-grow w-3/4">
+              <div className="mx-8">
+                <div className="">
+                  <Heading as="h1" className=" w-full py-4 top-14">
+                    IOTA JSON-RPC Reference - Version: {openrpc.info.version}
+                  </Heading>
+                  <ScrollSpy>
+                    <div className="">
+                      <p>{openrpc.info.description}</p>
+                      <Methods json={openrpc} apis={apis} schemas={schemas} />
+                    </div>
+                  </ScrollSpy>
+                </div>
               </div>
-            </ScrollSpy>
+            </main>
           </div>
-        </div>
-      </main>
-    </div>
+        );
+      }}
+    </BrowserOnly>
   );
 };