added dynamic routes

src/layouts/BorisLayout/index.tsx

@@ -1,7 +1,6 @@
-import { FC, Suspense, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import dynamic from 'next/dynamic';
 
 import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats';
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
@@ -10,6 +9,7 @@ import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
 import { Sticky } from '~/components/containers/Sticky';
 import { BorisComments } from '~/containers/boris/BorisComments';
+import { BorisSuperPowersSSR } from '~/containers/boris/BorisSuperpowers/ssr';
 import { Container } from '~/containers/main/Container';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { BorisUsageStats } from '~/types/boris';
@@ -25,65 +25,65 @@ type IProps = {
   isLoadingStats: boolean;
 };
 
-const BorisSuperPowers = dynamic(() => import('~/containers/boris/BorisSuperpowers/index'), {
-  ssr: false,
-})
+const BorisLayout: FC<IProps> = observer(
+  ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
+    const { isUser } = useAuthProvider();
+    const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [
+      stats.backend.comments.by_month,
+    ]);
+    const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [
+      stats.backend.comments.by_month,
+    ]);
 
-const BorisLayout: FC<IProps> = observer(({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
-  const { isUser } = useAuthProvider();
-  const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
-  const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
+    return (
+      <Container>
+        <div className={styles.wrap}>
+          <div className={styles.cover} />
 
-  return (
-    <Container>
-      <div className={styles.wrap}>
-        <div className={styles.cover} />
+          <div className={styles.image}>
+            <div className={styles.caption}>
+              <div className={styles.caption_text}>{title}</div>
+            </div>
 
-        <div className={styles.image}>
-          <div className={styles.caption}>
-            <div className={styles.caption_text}>{title}</div>
+            <img src="/images/boris_robot.svg" alt="Борис" />
           </div>
 
-          <img src="/images/boris_robot.svg" alt="Борис" />
-        </div>
+          <div className={styles.container}>
+            <Card className={styles.content}>
+              <Group>
+                <Superpower>
+                  <BorisSuperPowersSSR />
+                </Superpower>
 
-        <div className={styles.container}>
-          <Card className={styles.content}>
-            <Group>
-              <Superpower>
-                <Suspense fallback={<div />}>
-                  <BorisSuperPowers />
-                </Suspense>
-              </Superpower>
+                <BorisGraphicStats
+                  totalComments={stats.backend.comments.total}
+                  commentsByMonth={commentsByMonth}
+                  totalNodes={stats.backend.nodes.total}
+                  nodesByMonth={nodesByMonth}
+                />
 
-              <BorisGraphicStats
-                totalComments={stats.backend.comments.total}
-                commentsByMonth={commentsByMonth}
-                totalNodes={stats.backend.nodes.total}
-                nodesByMonth={nodesByMonth}
-              />
+                <BorisComments />
+              </Group>
+            </Card>
 
-              <BorisComments />
+            <Group className={styles.stats}>
+              <Sticky>
+                <BorisSidebar
+                  isTester={isTester}
+                  stats={stats}
+                  setBetaTester={setIsBetaTester}
+                  isUser={isUser}
+                  isLoading={isLoadingStats}
+                />
+              </Sticky>
             </Group>
-          </Card>
-
-          <Group className={styles.stats}>
-            <Sticky>
-              <BorisSidebar
-                isTester={isTester}
-                stats={stats}
-                setBetaTester={setIsBetaTester}
-                isUser={isUser}
-                isLoading={isLoadingStats}
-              />
-            </Sticky>
-          </Group>
+          </div>
         </div>
-      </div>
 
-      <SidebarRouter prefix="/" />
-    </Container>
-  );
-});
+        <SidebarRouter prefix="/" />
+      </Container>
+    );
+  }
+);
 
 export { BorisLayout };

src/layouts/MainLayout/index.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 
 import { LoadingProgress } from '~/components/common/LoadingProgress';
-import { Header } from '~/containers/main/Header';
+import { HeaderSSR } from '~/containers/main/Header/ssr';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 import styles from './styles.module.scss';
@@ -9,8 +9,10 @@ import styles from './styles.module.scss';
 export const MainLayout = ({ children }) => (
   <div className={styles.wrapper}>
     <div className={styles.content}>
-      <Header />
+      <HeaderSSR />
+
       {children}
+
       <LoadingProgress />
       <SidebarRouter />
     </div>