SSR SidebarContentsWrapper and CSR SidebarContents

packages/app/src/components/Sidebar.tsx

@@ -2,6 +2,8 @@ import React, {
   useCallback, useEffect, useRef, useState,
 } from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { useUserUISettings } from '~/client/services/user-ui-settings';
 import {
   useDrawerMode, useDrawerOpened,
@@ -14,7 +16,6 @@ import {
 
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
-import SidebarContents from './Sidebar/SidebarContents';
 import { SidebarNav } from './Sidebar/SidebarNav';
 import { StickyStretchableScroller } from './StickyStretchableScroller';
 
@@ -55,6 +56,7 @@ const GlobalNavigation = () => {
 };
 
 const SidebarContentsWrapper = () => {
+  const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents').then(mod => mod.SidebarContents), { ssr: false });
   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
 
   const calcViewHeight = useCallback(() => {

packages/app/src/components/Sidebar/SidebarContents.tsx

@@ -10,7 +10,7 @@ import Tag from './Tag';
 
 const DummyComponent = (): JSX.Element => <></>; // Todo: remove this later when it is able to render other Contents.
 
-const SidebarContents = (): JSX.Element => {
+export const SidebarContents = (): JSX.Element => {
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
   let Contents;
@@ -35,5 +35,3 @@ const SidebarContents = (): JSX.Element => {
   );
 
 };
-
-export default SidebarContents;