Cache component enable

[Gabrielhzt]

Summary

I have a right panel in my nextjs 16+ app that should show the chat or the task creation form or a task information or call... . And since cache components is enable I have a problem since I need the right panel to remember his state stored in the cookie and so that even when we refresh the page we keep the state of the right panel (open or close and "chat" or "task" or "new-task" or...). Right now when I reload the app the right panel keep his state open or close but the view ("chat" or "task" or...) takse more time to get it and so it create hydration error.

If you need anything else tell me, Thank you

Additional information

"use client";

import * as React from "react";
import { MessageCircle } from "lucide-react";
import { usePathname, useServerInsertedHTML } from "next/navigation";

import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils/cn";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

const RIGHT_PANEL_COOKIE_NAME = "right_panel_state";
const RIGHT_PANEL_VIEW_COOKIE_NAME = "right_panel_view"; // New cookie for view
const RIGHT_PANEL_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const RIGHT_PANEL_WIDTH = "25rem";
const RIGHT_PANEL_WIDTH_MOBILE = "18rem";
const RIGHT_PANEL_KEYBOARD_SHORTCUT = "k";

type PanelView =
  | "chat"
  | "new-task"
  | "task"
  | "call"
  | "create-open-role"
  | "applicants"
  | null;

type RightPanelContextProps = {
  state: "expanded" | "collapsed";
  open: boolean;
  setOpen: (open: boolean) => void;
  openMobile: boolean;
  setOpenMobile: (open: boolean) => void;
  isMobile: boolean;
  toggleRightPanel: () => void;

  panelView: PanelView;
  setPanelView: (view: PanelView) => void;

  openPanel: (view: PanelView) => void;
  closePanel: () => void;
};

const RightPanelContext = React.createContext<RightPanelContextProps | null>(
  null
);

export function useRightPanel() {
  const context = React.useContext(RightPanelContext);
  if (!context) {
    throw new Error("useRightPanel must be used within a RightPanelProvider.");
  }
  return context;
}

// Helper function to get cookie value
function getCookie(name: string): string | null {
  if (typeof document === "undefined") return null;
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift() || null;
  return null;
}

// Helper function to set cookie
function setCookie(name: string, value: string, maxAge: number) {
  if (typeof document === "undefined") return;
  document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
}

export function RightPanelProvider({
  defaultOpen = false,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}) {
  const isMobile = useIsMobile();
  const pathname = usePathname();
  const [openMobile, setOpenMobile] = React.useState(false);

  const allowedViews = React.useMemo<
    ReadonlyArray<
      "chat" | "new-task" | "task" | "create-open-role" | "call" | "applicants"
    >
  >(() => {
    // Check if we're in a project page
    const isInProject = /^\/project\/[^/]+/.test(pathname);

    if (!isInProject) {
      return []; // No panels allowed outside of project pages
    }

    // If in project and on tasks page, allow all panels
    if (pathname.includes("/tasks")) {
      return ["chat", "new-task", "task", "call"];
    }

    // Otherwise, only allow chat and call
    return ["chat", "call", "create-open-role", "applicants"];
  }, [pathname]);

  // internal state
  const [_open, _setOpen] = React.useState(() => {
    const cookieValue = getCookie(RIGHT_PANEL_COOKIE_NAME);
    if (cookieValue == null) return defaultOpen;
    return cookieValue === "true";
  });

  useServerInsertedHTML(() => {
    return (
      <>
        <script
          dangerouslySetInnerHTML={{
            __html: `(${function hydrateSidebarState(cookieName: string) {
              const cookie = document.cookie
                .split("; ")
                .find((row) => row.startsWith(`${cookieName}=`));

              const isOpen = cookie ? cookie.split("=")[1] === "true" : true;
              const state = isOpen ? "expanded" : "collapsed";
              const el = document.querySelector(
                '[data-slot="right-panel"]:not([data-mobile])'
              );
              if (el) {
                el.setAttribute("data-state", state);
                el.setAttribute(
                  "data-collapsible",
                  state === "collapsed" ? "offcanvas" : ""
                );
              }
            }.toString()})("${RIGHT_PANEL_COOKIE_NAME}");`,
          }}
        />
        <script
          dangerouslySetInnerHTML={{
            __html: `(${function hydratePanelView(cookieName: string) {
              const cookie = document.cookie
                .split("; ")
                .find((row) => row.startsWith(`${cookieName}=`));

              const panelView = cookie ? cookie.split("=")[1] : "";

              // Store in a temporary attribute that React can read
              const el = document.querySelector(
                '[data-slot="right-panel-wrapper"]'
              );
              if (el && panelView) {
                el.setAttribute("data-initial-panel-view", panelView);
              }
            }.toString()})("${RIGHT_PANEL_VIEW_COOKIE_NAME}");`,
          }}
        />
      </>
    );
  });
  const open = openProp ?? _open;

  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value;

      if (setOpenProp) setOpenProp(openState);
      else _setOpen(openState);

      setCookie(
        RIGHT_PANEL_COOKIE_NAME,
        String(openState),
        RIGHT_PANEL_COOKIE_MAX_AGE
      );
    },
    [setOpenProp, open]
  );

  const toggleRightPanel = React.useCallback(() => {
    return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
  }, [isMobile, setOpen]);

  // keyboard shortcut
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === RIGHT_PANEL_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault();
        toggleRightPanel();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleRightPanel]);

  // expanded/collapsed
  const state = open ? "expanded" : "collapsed";

  // panel router - initialize from cookie
  const getInitialPanelView = (): PanelView => {
    // First check if SSR script set an attribute
    if (typeof document !== "undefined") {
      const wrapper = document.querySelector(
        '[data-slot="right-panel-wrapper"]'
      );
      const initialView = wrapper?.getAttribute("data-initial-panel-view");
      if (initialView) {
        return initialView as PanelView;
      }
    }

    const savedView = getCookie(RIGHT_PANEL_VIEW_COOKIE_NAME);
    if (
      savedView === "chat" ||
      savedView === "new-task" ||
      savedView === "task" ||
      savedView === "create-open-role" ||
      savedView === "call" ||
      savedView === "applicants"
    ) {
      if (allowedViews.includes(savedView)) {
        return savedView;
      }
    }
    return null;
  };

  const [panelView, setPanelViewState] =
    React.useState<PanelView>(getInitialPanelView);

  // Wrapper to save to cookie when panel view changes
  const setPanelView = React.useCallback((view: PanelView) => {
    setPanelViewState(view);
    setCookie(
      RIGHT_PANEL_VIEW_COOKIE_NAME,
      view || "",
      RIGHT_PANEL_COOKIE_MAX_AGE
    );
  }, []);

  // Close panel if current view is not in allowedViews
  React.useEffect(() => {
    if (panelView && !allowedViews.includes(panelView)) {
      setPanelView(null);
      if (isMobile) {
        setOpenMobile(false);
      } else {
        setOpen(false);
      }
    }
  }, [allowedViews, panelView, isMobile, setOpen, setPanelView]);

  const openPanel = React.useCallback(
    (view: PanelView) => {
      if (view && !allowedViews.includes(view)) {
        console.warn(`View "${view}" is not allowed on this page`);
        return;
      }
      console.log("Setting panel view to:", view);
      setPanelView(view);
      if (isMobile) {
        setOpenMobile(true);
      } else {
        setOpen(true);
      }
    },
    [isMobile, setOpen, setPanelView, allowedViews]
  );

  const closePanel = React.useCallback(() => {
    setPanelView(null);
    if (isMobile) {
      setOpenMobile(false);
    } else {
      setOpen(false);
    }
  }, [isMobile, setOpen, setPanelView]);

  const contextValue: RightPanelContextProps = {
    state,
    open,
    setOpen,
    isMobile,
    openMobile,
    setOpenMobile,
    toggleRightPanel,
    panelView,
    setPanelView,
    openPanel,
    closePanel,
  };

  return (
    <RightPanelContext.Provider value={contextValue}>
      <div
        data-slot="right-panel-wrapper"
        style={
          {
            "--right-panel-width": RIGHT_PANEL_WIDTH,
            ...style,
          } as React.CSSProperties
        }
        className={cn(
          "group/right-panel-wrapper flex min-h-svh w-full",
          className
        )}
        {...props}
      >
        {children}
      </div>
    </RightPanelContext.Provider>
  );
}

export function RightPanel({
  className,
  children,
  ...props
}: React.ComponentProps<"div">) {
  const { isMobile, state, openMobile, setOpenMobile } = useRightPanel();

  if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-panel="right-panel"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--right-panel-width) p-0 [&>button]:hidden"
          style={
            {
              "--right-panel-width": RIGHT_PANEL_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side="right"
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Panel</SheetTitle>
            <SheetDescription>Mobile right panel</SheetDescription>
          </SheetHeader>

          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    );
  }

  return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === "collapsed" ? "offcanvas" : ""}
      data-side="right"
      data-slot="right-panel"
    >
      <div
        data-slot="right-panel-gap"
        className={cn(
          "relative w-(--right-panel-width) bg-transparent transition-[width] duration-200 ease-linear",
          "group-data-[state=collapsed]:w-0"
        )}
      />

      <div
        data-slot="right-panel-container"
        className={cn(
          "fixed inset-y-0 z-10 hidden w-(--right-panel-width) transition-[left,right,width] duration-200 ease-linear md:flex",
          "right-0 group-data-[state=collapsed]:right-[calc(var(--right-panel-width)*-1)]",
          "flex items-stretch"
        )}
        {...props}
      >
        <div
          data-panel="right-panel"
          data-slot="right-panel-inner"
          className={cn(
            "my-1 mr-1 flex w-full flex-col rounded-sm border border-neutral-800 bg-neutral-900",
            className
          )}
        >
          {children}
        </div>
      </div>
    </div>
  );
}

export function RightPanelTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleRightPanel } = useRightPanel();

  return (
    <Button
      data-panel="trigger"
      data-slot="right-panel-trigger"
      variant="ghost"
      size="icon"
      className={cn("size-7", className)}
      onClick={(event) => {
        onClick?.(event);
        toggleRightPanel();
      }}
      {...props}
    >
      <MessageCircle size={16} />
      <span className="sr-only">Toggle Right Panel</span>
    </Button>
  );
}

export function RightPanelHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="right-panel-header"
      data-panel="header"
      className={cn(
        "flex flex-col gap-2 border-b border-neutral-800 p-2",
        className
      )}
      {...props}
    />
  );
}

export function RightPanelContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="right-panel-content"
      data-panel="content"
      className={cn("flex min-h-0 flex-1 flex-col gap-2", className)}
      {...props}
    />
  );
}

export function RightPanelFooter({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="right-panel-footer"
      data-panel="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  );
}

export function RightPanelInset({
  className,
  ...props
}: React.ComponentProps<"main">) {
  return (
    <main
      data-slot="right-panel-inset"
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        className
      )}
      {...props}
    />
  );
}

"use client";

import { useRightPanel } from "@/components/ui/right-panel";
import {
  RightPanelHeader,
  RightPanelContent,
} from "@/components/ui/right-panel";
import { Button } from "@/components/ui/button";
import { X, PanelRight } from "lucide-react";
import { Separator } from "./ui/separator";
import { Chat } from "@/features/chat/components";
import NewTaskView from "@/features/tasks/components/new-task-view";
import { useEffect } from "react";
import Call from "@/features/call/components/call";
import { useParams, useSearchParams, useRouter } from "next/navigation";
import TaskView from "@/features/tasks/components/task-view";
import { CreateOpenRole } from "@/features/project/components/create-open-role";
import { ApplicantsView } from "@/features/project/components/applicants-view";

export function RightPanelRouter() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const slug = params?.slug as string;
  const taskId = searchParams.get("taskId");
  const openingId = searchParams.get("openingId");
  const roleName = searchParams.get("roleName");
  const projectId = searchParams.get("projectId");
  const { panelView, closePanel } = useRightPanel();

  const viewConfig = {
    chat: { title: "Chat", component: Chat },
    call: { title: "Call", component: () => <Call room={slug} /> },
    "new-task": {
      title: "New Task",
      component: () => <NewTaskView projectSlug={slug} />,
    },
    task: {
      title: "Task",
      component: () =>
        taskId ? <TaskView projectSlug={slug} taskId={taskId} /> : null,
    },
    "create-open-role": {
      title: "Create a new open role",
      component: () => <CreateOpenRole projectSlug={slug} />,
    },
    applicants: {
      title: "Role Applicants",
      component: () =>
        openingId && roleName && projectId ? (
          <ApplicantsView
            openingId={openingId}
            projectId={projectId}
            roleName={decodeURIComponent(roleName)}
          />
        ) : null,
    },
  };

  const currentView = panelView && viewConfig[panelView];

  {
    /**
      // Open panel when taskId is present in URL
      useEffect(() => {
        if (taskId && panelView !== "task") {
          console.log("Opening task panel for taskId:", taskId);
          openPanel("task");
        }
      }, [taskId, panelView, openPanel]); // Changed from [params] to proper dependencies
    */
  }
  // Close panel if task view has no taskId
  useEffect(() => {
    if (panelView === "task" && !taskId) {
      const timer = setTimeout(() => {
        closePanel();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [panelView, taskId, closePanel]); // Removed the problematic !panelView check

  const handleClosePanel = () => {
    if (taskId) {
      const params = new URLSearchParams(searchParams.toString());
      params.delete("taskId");
      router.push(`?${params.toString()}`);
    }
    if (openingId || roleName || projectId) {
      const params = new URLSearchParams(searchParams.toString());
      params.delete("openingId");
      params.delete("roleName");
      params.delete("projectId");
      router.push(`?${params.toString()}`);
    }
    closePanel();
  };

  if (!currentView) {
    return (
      <>
        <RightPanelHeader>
          <div className="flex items-center justify-between">
            <span className="text-sm text-neutral-400">No view selected</span>
          </div>
        </RightPanelHeader>
        <RightPanelContent />
      </>
    );
  }

  return (
    <>
      <RightPanelHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Button
              onClick={handleClosePanel}
              variant={"ghost"}
              className="h-7 w-7"
            >
              {panelView === "new-task" ? (
                <X size={16} />
              ) : (
                <PanelRight size={16} />
              )}
            </Button>
            <Separator
              orientation="vertical"
              className="mr-2 rounded-full border-neutral-800 data-[orientation=vertical]:h-4"
            />
            <h2 className="text-sm font-medium text-neutral-200">
              {currentView.title}
            </h2>
          </div>
        </div>
      </RightPanelHeader>

      <RightPanelContent>
        <currentView.component />
      </RightPanelContent>
    </>
  );
}

import { RightPanelHeaderComp } from "@/components/right-panel-header";
import { RightPanelRouter } from "@/components/right-panel-router";
import { AppSidebar } from "@/components/sidebar/app-sidebar";
import { RightPanel, RightPanelProvider } from "@/components/ui/right-panel";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { Suspense } from "react";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <SidebarProvider>
      <RightPanelProvider>
        <AppSidebar />
        <SidebarInset className="flex h-[calc(100dvh-8px)] w-auto flex-col items-center gap-2 overflow-auto !rounded-sm border border-neutral-800 bg-neutral-900">
          {children}
        </SidebarInset>

        <RightPanel>
          <Suspense fallback={"Loading..."}>
            <RightPanelRouter />
          </Suspense>
        </RightPanel>
      </RightPanelProvider>
    </SidebarProvider>
  );
}

Example

No response

[Gabrielhzt]

@icyJoseph could you help me on that one pls?

[icyJoseph]

Hi, I am just coming back from a short pause. Let's see, you went for the useServerInsertedHTML, that kind of works, but a simple inline script also does the trick.

Let me parse again your question and see what's going on.

[aditya-cherukuru]

Hey, This is a classic Hydration Mismatch.

The issue happens inside your useState initialization in RightPanelProvider.
On the Server, document is undefined, so getCookie returns null. React renders the panel as Closed/Empty.
On the Client, document.cookie exists, so React initializes the state as Open/Chat.

Because the Server HTML and Client HTML don't match, React throws a hydration error and discards the server HTML, causing the flash/delay you are seeing.

The Fix:
You need to read the cookies in your Server Component (RootLayout) and pass them as props to the provider. This ensures both Server and Client start with the exact same data.

1. Update RightPanelProvider to accept initial view

Modify your provider to accept a defaultPanelView prop and use it in useState.

// components/ui/right-panel.tsx

// 1. Add defaultPanelView to the props type
export function RightPanelProvider({
  defaultOpen = false,
  defaultPanelView = null, // Add this prop
  open: openProp,
  onOpenChange: setOpenProp,
  // ... other props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean;
  defaultPanelView?: PanelView; // Add type definition
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}) {
  
  // ... existing code ...

  // 2. Simplify internal state to use the props directly
  // We don't need to read cookies here anymore because the prop comes from the server
  const [_open, _setOpen] = React.useState(defaultOpen);

  // 3. Update panelView state to use the prop
  const [panelView, setPanelViewState] = React.useState<PanelView>(defaultPanelView);

  // ... rest of the component

2. Update RootLayout to read cookies

Change your layout to an async function, read the cookies using next/headers, and pass them down.

// app/layout.tsx
import { cookies } from "next/headers"; // Import cookies

export default async function RootLayout({ // Make this async
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Read cookies on the server
  const cookieStore = await cookies();
  const defaultOpen = cookieStore.get("right_panel_state")?.value === "true";
  const defaultView = cookieStore.get("right_panel_view")?.value || null;

  return (
    <SidebarProvider>
      {/* Pass the server-read values as props */}
      <RightPanelProvider 
        defaultOpen={defaultOpen} 
        defaultPanelView={defaultView as any}
      >
        <AppSidebar />
        <SidebarInset className="...">
          {children}
        </SidebarInset>

        <RightPanel>
          <Suspense fallback={"Loading..."}>
            <RightPanelRouter />
          </Suspense>
        </RightPanel>
      </RightPanelProvider>
    </SidebarProvider>
  );
}

Why this works:
Using cookies() in the layout ensures that the initial HTML sent from the server already has the panel "Open" and set to "Chat". When the browser takes over, the props match the HTML, eliminating the hydration error and the delay.

[Gabrielhzt]

Thanks but then nextjs throw an error because now that cache component is enable we can't call cookies() in the layout