docusaurus-theme-openapi-docs 1.3.2 → 1.4.1

package/lib/theme/ApiDemoPanel/Export/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _fileSaver = _interopRequireDefault(require("file-saver"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+const saveFile = url => {
+  let fileName;
+
+  if (url.endsWith("json") || url.endsWith("yaml") || url.endsWith("yml")) {
+    fileName = url.substring(url.lastIndexOf("/") + 1);
+  }
+
+  _fileSaver.default.saveAs(url, fileName ? fileName : "openapi.txt");
+};
+
+function Export({
+  url,
+  proxy
+}) {
+  return <div style={{
+    float: "right"
+  }} className="dropdown dropdown--hoverable dropdown--right">
+      <button className="export-button button button--sm button--secondary">
+        Export
+      </button>
+      <ul className="export-dropdown dropdown__menu">
+        <li>
+          <a onClick={e => {
+          e.preventDefault();
+          saveFile(`${url}`);
+        }} className="dropdown__link" href={`${url}`}>
+            OpenAPI Spec
+          </a>
+        </li>
+      </ul>
+    </div>;
+}
+
+var _default = Export;
+exports.default = _default;

package/lib/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -35,15 +35,14 @@ function createPersistanceMiddleware(options) {
       if (state.auth.selected) {
         storage.setItem((0, _storageUtils.hashArray)(Object.keys(state.auth.options)), state.auth.selected);
       }
-    }
-
-    if (action.type === "contentType/setContentType") {
-      storage.setItem("contentType", action.payload);
-    }
+    } // TODO: determine way to rehydrate without flashing
+    // if (action.type === "contentType/setContentType") {
+    //   storage.setItem("contentType", action.payload);
+    // }
+    // if (action.type === "accept/setAccept") {
+    //   storage.setItem("accept", action.payload);
+    // }
 
-    if (action.type === "accept/setAccept") {
-      storage.setItem("accept", action.payload);
-    }
 
     if (action.type === "server/setServer") {
       storage.setItem("server", action.payload);

package/lib/theme/ApiItem/index.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = ApiItem;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _BrowserOnly = _interopRequireDefault(require("@docusaurus/BrowserOnly"));
+
 var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/ExecutionEnvironment"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
 var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
 
 var _reactRedux = require("react-redux");
 
@@ -39,38 +41,42 @@ const {
   DocProvider
 } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = _ => <div style={{
-  marginTop: "3.5em"
-}} />;
-
-let DocItem = props => {
-  return <div style={{
-    marginTop: "3.5em"
-  }} />;
-};
+let ApiDemoPanel = _ => <div />;
 
 if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
+}
+
+function ApiItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
+  const {
+    frontMatter
+  } = MDXComponent;
+  const {
+    info_path: infoPath
+  } = frontMatter;
+  const {
+    api
+  } = frontMatter;
+  const {
+    siteConfig
+  } = (0, _useDocusaurusContext.default)();
+  const themeConfig = siteConfig.themeConfig;
+  const options = themeConfig.api;
+  const isBrowser = (0, _useIsBrowser.default)(); // Define store2
+
+  let store2 = {};
+  const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options); // Init store for SSR
+
+  if (!isBrowser) {
+    store2 = (0, _store.createStoreWithoutState)({}, [persistanceMiddleware]);
+  } // Init store for CSR to hydrate components
+
+
+  if (isBrowser) {
+    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _ref;
 
-  DocItem = function DocItem(props) {
-    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _window2, _window3, _ref;
-
-    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
-    const MDXComponent = props.content;
-    const {
-      frontMatter
-    } = MDXComponent;
-    const {
-      info_path: infoPath
-    } = frontMatter;
-    const {
-      api
-    } = frontMatter;
-    const {
-      siteConfig
-    } = (0, _useDocusaurusContext.default)();
-    const themeConfig = siteConfig.themeConfig;
-    const options = themeConfig.api;
     const acceptArray = Array.from(new Set(Object.values((_api$responses = api === null || api === void 0 ? void 0 : api.responses) !== null && _api$responses !== void 0 ? _api$responses : {}).map(response => {
       var _response$content;
 
@@ -94,19 +100,19 @@ if (_ExecutionEnvironment.default.canUseDOM) {
       security: api === null || api === void 0 ? void 0 : api.security,
       securitySchemes: api === null || api === void 0 ? void 0 : api.securitySchemes,
       options
-    });
-    const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
-    const acceptValue = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("accept");
-    const contentTypeValue = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.sessionStorage.getItem("contentType");
-    const server = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.sessionStorage.getItem("server");
+    }); // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
+
+    const server = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("server");
     const serverObject = (_ref = JSON.parse(server)) !== null && _ref !== void 0 ? _ref : {};
-    const store2 = (0, _store.createStoreWithState)({
+    store2 = (0, _store.createStoreWithState)({
       accept: {
-        value: acceptValue || acceptArray[0],
+        value: acceptArray[0],
         options: acceptArray
       },
       contentType: {
-        value: contentTypeValue || contentTypeArray[0],
+        value: contentTypeArray[0],
         options: contentTypeArray
       },
       server: {
@@ -122,30 +128,43 @@ if (_ExecutionEnvironment.default.canUseDOM) {
       params,
       auth
     }, [persistanceMiddleware]);
-
-    const DocContent = () => {
-      return <div className="row">
-          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
+  }
+
+  if (api) {
+    return <DocProvider content={props.content}>
+        <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+          <_Metadata.default />
+          <_Layout.default>
+            <_reactRedux.Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <_BrowserOnly.default fallback={<div>Loading...</div>}>
+                    {() => {
+                    return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                  }}
+                  </_BrowserOnly.default>
+                </div>
+              </div>
+            </_reactRedux.Provider>
+          </_Layout.default>
+        </_themeCommon.HtmlClassNameProvider>
+      </DocProvider>;
+  } // Non-API docs
+
+
+  return <DocProvider content={props.content}>
+      <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+        <_Metadata.default />
+        <_Layout.default>
+          <div className="row">
+            <div className="col col--12">
+              <MDXComponent />
+            </div>
           </div>
-          {api && <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>}
-        </div>;
-    };
-
-    return <_reactRedux.Provider store={store2}>
-        <DocProvider content={props.content}>
-          <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
-            <_Metadata.default />
-            <_Layout.default>
-              <DocContent />
-            </_Layout.default>
-          </_themeCommon.HtmlClassNameProvider>
-        </DocProvider>
-      </_reactRedux.Provider>;
-  };
-}
-
-var _default = DocItem;
-exports.default = _default;
+        </_Layout.default>
+      </_themeCommon.HtmlClassNameProvider>
+    </DocProvider>;
+}

package/lib/theme/ApiItem/store.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createStoreWithState = void 0;
+exports.createStoreWithoutState = exports.createStoreWithState = void 0;
 
 var _toolkit = require("@reduxjs/toolkit");
 
@@ -45,4 +45,12 @@ const createStoreWithState = (preloadedState, middlewares) => (0, _toolkit.confi
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
 });
 
-exports.createStoreWithState = createStoreWithState;
+exports.createStoreWithState = createStoreWithState;
+
+const createStoreWithoutState = (preloadedState, middlewares) => (0, _toolkit.configureStore)({
+  reducer: rootReducer,
+  preloadedState,
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
+});
+
+exports.createStoreWithoutState = createStoreWithoutState;

package/lib-next/theme/ApiDemoPanel/Export/index.js

@@ -0,0 +1,49 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+import React from "react";
+import fileSaver from "file-saver";
+
+const saveFile = (url) => {
+  let fileName;
+
+  if (url.endsWith("json") || url.endsWith("yaml") || url.endsWith("yml")) {
+    fileName = url.substring(url.lastIndexOf("/") + 1);
+  }
+
+  fileSaver.saveAs(url, fileName ? fileName : "openapi.txt");
+};
+
+function Export({ url, proxy }) {
+  return (
+    <div
+      style={{
+        float: "right",
+      }}
+      className="dropdown dropdown--hoverable dropdown--right"
+    >
+      <button className="export-button button button--sm button--secondary">
+        Export
+      </button>
+      <ul className="export-dropdown dropdown__menu">
+        <li>
+          <a
+            onClick={(e) => {
+              e.preventDefault();
+              saveFile(`${url}`);
+            }}
+            className="dropdown__link"
+            href={`${url}`}
+          >
+            OpenAPI Spec
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Export;

package/lib-next/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -29,15 +29,13 @@ export function createPersistanceMiddleware(options) {
           state.auth.selected
         );
       }
-    }
-
-    if (action.type === "contentType/setContentType") {
-      storage.setItem("contentType", action.payload);
-    }
-
-    if (action.type === "accept/setAccept") {
-      storage.setItem("accept", action.payload);
-    }
+    } // TODO: determine way to rehydrate without flashing
+    // if (action.type === "contentType/setContentType") {
+    //   storage.setItem("contentType", action.payload);
+    // }
+    // if (action.type === "accept/setAccept") {
+    //   storage.setItem("accept", action.payload);
+    // }
 
     if (action.type === "server/setServer") {
       storage.setItem("server", action.payload);

package/lib-next/theme/ApiItem/index.js

@@ -5,49 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import clsx from "clsx";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import { Provider } from "react-redux";
 import { createAuth } from "../ApiDemoPanel/Authorization/slice";
 import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
-import { createStoreWithState } from "./store";
+import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_) => (
-  <div
-    style={{
-      marginTop: "3.5em",
-    }}
-  />
-);
-
-let DocItem = (props) => {
-  return (
-    <div
-      style={{
-        marginTop: "3.5em",
-      }}
-    />
-  );
-};
+let ApiDemoPanel = (_) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
+}
+
+export default function ApiItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
+  const { frontMatter } = MDXComponent;
+  const { info_path: infoPath } = frontMatter;
+  const { api } = frontMatter;
+  const { siteConfig } = useDocusaurusContext();
+  const themeConfig = siteConfig.themeConfig;
+  const options = themeConfig.api;
+  const isBrowser = useIsBrowser(); // Define store2
 
-  DocItem = function DocItem(props) {
-    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
-    const MDXComponent = props.content;
-    const { frontMatter } = MDXComponent;
-    const { info_path: infoPath } = frontMatter;
-    const { api } = frontMatter;
-    const { siteConfig } = useDocusaurusContext();
-    const themeConfig = siteConfig.themeConfig;
-    const options = themeConfig.api;
+  let store2 = {};
+  const persistanceMiddleware = createPersistanceMiddleware(options); // Init store for SSR
+
+  if (!isBrowser) {
+    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+  } // Init store for CSR to hydrate components
+
+  if (isBrowser) {
     const acceptArray = Array.from(
       new Set(
         Object.values(api?.responses ?? {})
@@ -73,20 +69,20 @@ if (ExecutionEnvironment.canUseDOM) {
       security: api?.security,
       securitySchemes: api?.securitySchemes,
       options,
-    });
-    const persistanceMiddleware = createPersistanceMiddleware(options);
-    const acceptValue = window?.sessionStorage.getItem("accept");
-    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    }); // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
+
     const server = window?.sessionStorage.getItem("server");
     const serverObject = JSON.parse(server) ?? {};
-    const store2 = createStoreWithState(
+    store2 = createStoreWithState(
       {
         accept: {
-          value: acceptValue || acceptArray[0],
+          value: acceptArray[0],
           options: acceptArray,
         },
         contentType: {
-          value: contentTypeValue || contentTypeArray[0],
+          value: contentTypeArray[0],
           options: contentTypeArray,
         },
         server: {
@@ -104,35 +100,46 @@ if (ExecutionEnvironment.canUseDOM) {
       },
       [persistanceMiddleware]
     );
+  }
 
-    const DocContent = () => {
-      return (
-        <div className="row">
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && (
-            <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>
-          )}
-        </div>
-      );
-    };
-
+  if (api) {
     return (
-      <Provider store={store2}>
-        <DocProvider content={props.content}>
-          <HtmlClassNameProvider className={docHtmlClassName}>
-            <DocItemMetadata />
-            <DocItemLayout>
-              <DocContent />
-            </DocItemLayout>
-          </HtmlClassNameProvider>
-        </DocProvider>
-      </Provider>
+      <DocProvider content={props.content}>
+        <HtmlClassNameProvider className={docHtmlClassName}>
+          <DocItemMetadata />
+          <DocItemLayout>
+            <Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <BrowserOnly fallback={<div>Loading...</div>}>
+                    {() => {
+                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                    }}
+                  </BrowserOnly>
+                </div>
+              </div>
+            </Provider>
+          </DocItemLayout>
+        </HtmlClassNameProvider>
+      </DocProvider>
     );
-  };
-}
+  } // Non-API docs
 
-export default DocItem;
+  return (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <div className="row">
+            <div className="col col--12">
+              <MDXComponent />
+            </div>
+          </div>
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  );
+}

package/lib-next/theme/ApiItem/store.js

@@ -28,3 +28,10 @@ export const createStoreWithState = (preloadedState, middlewares) =>
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().concat(...middlewares),
   });
+export const createStoreWithoutState = (preloadedState, middlewares) =>
+  configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(...middlewares),
+  });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -35,6 +35,7 @@
     "@docusaurus/types": "2.0.1",
     "@types/concurrently": "^6.3.0",
     "@types/crypto-js": "^4.1.0",
+    "@types/file-saver": "^2.0.5",
     "@types/fs-extra": "^9.0.13",
     "@types/lodash": "^4.14.176",
     "@types/mdx-js__react": "^1.5.4",
@@ -50,7 +51,8 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.3.2",
+    "docusaurus-plugin-openapi-docs": "^1.4.1",
+    "file-saver": "^2.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -71,5 +73,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "761a89172da04573369441cf7342f6c643bc3ecd"
+  "gitHead": "ddfa49093f75f628536b8d9e25f88eb9e541667c"
 }

package/src/theme/ApiDemoPanel/Export/index.tsx

@@ -0,0 +1,47 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+
+import fileSaver from "file-saver";
+
+const saveFile = (url: string) => {
+  let fileName;
+  if (url.endsWith("json") || url.endsWith("yaml") || url.endsWith("yml")) {
+    fileName = url.substring(url.lastIndexOf("/") + 1);
+  }
+  fileSaver.saveAs(url, fileName ? fileName : "openapi.txt");
+};
+
+function Export({ url, proxy }: any) {
+  return (
+    <div
+      style={{ float: "right" }}
+      className="dropdown dropdown--hoverable dropdown--right"
+    >
+      <button className="export-button button button--sm button--secondary">
+        Export
+      </button>
+      <ul className="export-dropdown dropdown__menu">
+        <li>
+          <a
+            onClick={(e) => {
+              e.preventDefault();
+              saveFile(`${url}`);
+            }}
+            className="dropdown__link"
+            href={`${url}`}
+          >
+            OpenAPI Spec
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Export;

package/src/theme/ApiDemoPanel/persistanceMiddleware.ts

@@ -40,13 +40,14 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
         }
       }
 
-      if (action.type === "contentType/setContentType") {
-        storage.setItem("contentType", action.payload);
-      }
+      // TODO: determine way to rehydrate without flashing
+      // if (action.type === "contentType/setContentType") {
+      //   storage.setItem("contentType", action.payload);
+      // }
 
-      if (action.type === "accept/setAccept") {
-        storage.setItem("accept", action.payload);
-      }
+      // if (action.type === "accept/setAccept") {
+      //   storage.setItem("accept", action.payload);
+      // }
 
       if (action.type === "server/setServer") {
         storage.setItem("server", action.payload);

package/src/theme/ApiItem/index.tsx

@@ -7,11 +7,12 @@
 
 import React from "react";
 
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import type { Props } from "@theme/DocItem";
-import clsx from "clsx";
 import { ServerObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
 import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/types";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
@@ -23,35 +24,42 @@ import { createAuth } from "../ApiDemoPanel/Authorization/slice";
 import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
-import { createStoreWithState } from "./store";
+import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
-  <div style={{ marginTop: "3.5em" }} />
-);
+let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
 
-let DocItem = (props: Props) => {
-  return <div style={{ marginTop: "3.5em" }} />;
-};
+if (ExecutionEnvironment.canUseDOM) {
+  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
+}
 
 interface ApiFrontMatter extends DocFrontMatter {
   readonly api?: ApiItemType;
 }
 
-if (ExecutionEnvironment.canUseDOM) {
-  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
-
-  DocItem = function DocItem(props: Props): JSX.Element {
-    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
-    const MDXComponent = props.content;
-    const { frontMatter } = MDXComponent;
-    const { info_path: infoPath } = frontMatter as DocFrontMatter;
-    const { api } = frontMatter as ApiFrontMatter;
-    const { siteConfig } = useDocusaurusContext();
-    const themeConfig = siteConfig.themeConfig as ThemeConfig;
-    const options = themeConfig.api;
-
+export default function ApiItem(props: Props): JSX.Element {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
+  const { frontMatter } = MDXComponent;
+  const { info_path: infoPath } = frontMatter as DocFrontMatter;
+  const { api } = frontMatter as ApiFrontMatter;
+  const { siteConfig } = useDocusaurusContext();
+  const themeConfig = siteConfig.themeConfig as ThemeConfig;
+  const options = themeConfig.api;
+  const isBrowser = useIsBrowser();
+
+  // Define store2
+  let store2: any = {};
+  const persistanceMiddleware = createPersistanceMiddleware(options);
+
+  // Init store for SSR
+  if (!isBrowser) {
+    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+  }
+
+  // Init store for CSR to hydrate components
+  if (isBrowser) {
     const acceptArray = Array.from(
       new Set(
         Object.values(api?.responses ?? {})
@@ -59,18 +67,15 @@ if (ExecutionEnvironment.canUseDOM) {
           .flat()
       )
     );
-
     const content = api?.requestBody?.content ?? {};
     const contentTypeArray = Object.keys(content);
     const servers = api?.servers ?? [];
-
     const params = {
       path: [] as ParameterObject[],
       query: [] as ParameterObject[],
       header: [] as ParameterObject[],
       cookie: [] as ParameterObject[],
     };
-
     api?.parameters?.forEach(
       (param: { in: "path" | "query" | "header" | "cookie" }) => {
         const paramType = param.in;
@@ -78,23 +83,25 @@ if (ExecutionEnvironment.canUseDOM) {
         paramsArray.push(param as ParameterObject);
       }
     );
-
     const auth = createAuth({
       security: api?.security,
       securitySchemes: api?.securitySchemes,
       options,
     });
-
-    const persistanceMiddleware = createPersistanceMiddleware(options);
-    const acceptValue = window?.sessionStorage.getItem("accept");
-    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
     const server = window?.sessionStorage.getItem("server");
     const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
-    const store2 = createStoreWithState(
+
+    store2 = createStoreWithState(
       {
-        accept: { value: acceptValue || acceptArray[0], options: acceptArray },
+        accept: {
+          value: acceptArray[0],
+          options: acceptArray,
+        },
         contentType: {
-          value: contentTypeValue || contentTypeArray[0],
+          value: contentTypeArray[0],
           options: contentTypeArray,
         },
         server: {
@@ -108,35 +115,47 @@ if (ExecutionEnvironment.canUseDOM) {
       },
       [persistanceMiddleware]
     );
+  }
 
-    const DocContent = () => {
-      return (
-        <div className="row">
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && (
-            <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>
-          )}
-        </div>
-      );
-    };
-
+  if (api) {
     return (
-      <Provider store={store2}>
-        <DocProvider content={props.content}>
-          <HtmlClassNameProvider className={docHtmlClassName}>
-            <DocItemMetadata />
-            <DocItemLayout>
-              <DocContent />
-            </DocItemLayout>
-          </HtmlClassNameProvider>
-        </DocProvider>
-      </Provider>
+      <DocProvider content={props.content}>
+        <HtmlClassNameProvider className={docHtmlClassName}>
+          <DocItemMetadata />
+          <DocItemLayout>
+            <Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <BrowserOnly fallback={<div>Loading...</div>}>
+                    {() => {
+                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                    }}
+                  </BrowserOnly>
+                </div>
+              </div>
+            </Provider>
+          </DocItemLayout>
+        </HtmlClassNameProvider>
+      </DocProvider>
     );
-  };
+  }
+
+  // Non-API docs
+  return (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <div className="row">
+            <div className="col col--12">
+              <MDXComponent />
+            </div>
+          </div>
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  );
 }
-
-export default DocItem;

package/src/theme/ApiItem/store.ts

@@ -38,4 +38,15 @@ export const createStoreWithState = (
       getDefaultMiddleware().concat(...middlewares),
   });
 
+export const createStoreWithoutState = (
+  preloadedState: {},
+  middlewares: any[]
+) =>
+  configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(...middlewares),
+  });
+
 export type AppDispatch = ReturnType<typeof createStoreWithState>["dispatch"];