wip

Author: coltondotio

packages/fern-docs/components/src/sidebar/nodes/SidebarRootNodeImpl.tsx

@@ -26,6 +26,7 @@ export function SidebarRootNodeImpl({
     const forceClientRender = renderOptions?.forceClientRender ?? false;
     const wrapSectionNode = renderOptions?.wrapSectionNode;
     const wrapPageNode = renderOptions?.wrapPageNode;
+    const currentVariantId = renderOptions?.currentVariantId;
 
     const node = withPrunedNavigation(root, {
         visibleNodeIds: visibleNodeIds,
@@ -81,7 +82,7 @@ export function SidebarRootNodeImpl({
                         <li key={child.id}>
                             <SidebarRootChild
                                 node={child}
-                                renderOptions={{ forceClientRender, wrapSectionNode, wrapPageNode }}
+                                renderOptions={{ forceClientRender, wrapSectionNode, wrapPageNode, currentVariantId }}
                             />
                         </li>
                     ))}

packages/fern-docs/components/src/sidebar/nodes/SidebarVariantedNode.tsx

@@ -25,8 +25,7 @@ export function SidebarVariantedNode({ node, depth, renderOptions }: SidebarVari
     const forceClientRender = renderOptions.forceClientRender ?? false;
     const clientVariantId = useCurrentVariantId();
 
-    // Use server-side variant ID if available (from renderOptions), otherwise fall back to client state
-    // This prevents hydration mismatches where the default variant flashes before the correct one loads
+    // Use server-side variant ID from renderOptions for SSR, fall back to client state after hydration
     const currentVariantId = renderOptions.currentVariantId ?? clientVariantId;
 
     // Find the current variant or default to the one marked as default

packages/fern-docs/components/src/state/navigation.tsx

@@ -2,7 +2,7 @@
 
 import type { FernNavigation } from "@fern-api/fdr-sdk";
 import { useIsomorphicLayoutEffect, useLazyRef } from "@fern-ui/react-commons";
-import { atom, useAtomValue } from "jotai";
+import { atom, useAtomValue, useSetAtom } from "jotai";
 import { useHydrateAtoms } from "jotai/utils";
 import React from "react";
 import { create, type StoreApi, type UseBoundStore } from "zustand";
@@ -137,25 +137,39 @@ export function SetCurrentNavigationNode({
 }) {
     const useStore = React.useContext(RootNodeStoreContext);
     const dispatch = useStore((s) => s.dispatch);
-
-    // Hydrate atoms with initial values during SSR to prevent hydration mismatches
-    useHydrateAtoms(
-        [
-            [currentSidebarRootNodeIdAtom, sidebarRootNodeId],
-            [currentNodeIdAtom, nodeId],
-            [currentTabIdAtom, tabId],
-            [currentProductIdAtom, productId],
-            [currentProductSlugAtom, productSlug],
-            [currentVersionIdAtom, versionId],
-            [currentVersionSlugAtom, versionSlug],
-            [currentVariantIdAtom, variantId],
-            [currentVersionIsDefaultAtom, versionIsDefault ?? false],
-            [currentProductIsDefaultAtom, productIsDefault ?? false]
-        ],
-        {
-            dangerouslyForceHydrate: true
-        }
-    );
+    const setCurrentSidebarRootNodeId = useSetAtom(currentSidebarRootNodeIdAtom);
+    const setCurrentNodeId = useSetAtom(currentNodeIdAtom);
+    const setCurrentTabId = useSetAtom(currentTabIdAtom);
+    const setCurrentProductId = useSetAtom(currentProductIdAtom);
+    const setCurrentProductSlug = useSetAtom(currentProductSlugAtom);
+    const setCurrentVersionId = useSetAtom(currentVersionIdAtom);
+    const setCurrentVersionSlug = useSetAtom(currentVersionSlugAtom);
+    const setCurrentVariantId = useSetAtom(currentVariantIdAtom);
+    const setCurrentVersionIsDefault = useSetAtom(currentVersionIsDefaultAtom);
+    const setCurrentProductIsDefault = useSetAtom(currentProductIsDefaultAtom);
+    useIsomorphicLayoutEffect(() => {
+        setCurrentSidebarRootNodeId(sidebarRootNodeId);
+        setCurrentNodeId(nodeId);
+        setCurrentProductId(productId);
+        setCurrentProductSlug(productSlug);
+        setCurrentTabId(tabId);
+        setCurrentVersionId(versionId);
+        setCurrentVersionSlug(versionSlug);
+        setCurrentVariantId(variantId);
+        setCurrentVersionIsDefault(versionIsDefault ?? false);
+        setCurrentProductIsDefault(productIsDefault ?? false);
+    }, [
+        nodeId,
+        tabId,
+        sidebarRootNodeId,
+        productId,
+        productSlug,
+        versionId,
+        versionSlug,
+        variantId,
+        versionIsDefault,
+        productIsDefault
+    ]);
 
     useIsomorphicLayoutEffect(() => {
         if (nodeId && sidebarRootNodeId) {