added dynamic routes

package.json

@@ -79,10 +79,10 @@
     "@next/bundle-analyzer": "^12.0.8",
     "@next/eslint-plugin-next": "^12.0.8",
     "@types/marked": "^4.0.1",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react": "^17.0.2",
     "@types/node": "^11.13.22",
     "@types/ramda": "^0.26.33",
+    "@types/react": "^17.0.2",
+    "@types/react-router-dom": "^5.1.7",
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^5.10.1",

src/components/bars/SubmitBar/index.tsx

@@ -8,12 +8,11 @@ import { useShowModal } from '~/hooks/modal/useShowModal';
 
 import styles from './styles.module.scss';
 
-
+export interface SubmitBarProps {
-interface Props {
   isLab?: boolean;
 }
 
-const SubmitBar: FC<Props> = ({ isLab }) => {
+const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => {
   const showModal = useShowModal(Dialog.CreateNode);
   const [focused, setFocused] = useState(false);
 

src/components/bars/SubmitBar/ssr.ts

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic';
+
+import type { SubmitBarProps } from './index';
+
+export const SubmitBarSSR = dynamic<SubmitBarProps>(
+  () => import('./index').then(it => it.SubmitBar),
+  { ssr: false });

src/components/node/NodeCommentForm/index.tsx

@@ -5,7 +5,7 @@ import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { IComment } from '~/types';
 import { IUser } from '~/types/auth';
 
-interface NodeCommentFormProps {
+export interface NodeCommentFormProps {
   user: IUser;
   nodeId?: number;
   saveComment: (comment: IComment) => Promise<unknown>;

src/components/node/NodeCommentForm/ssr.ts

@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic';
+
+import type { NodeCommentFormProps } from './index';
+
+export const NodeCommentFormSSR = dynamic<NodeCommentFormProps>(
+  () => import('./index').then(it => it.NodeCommentForm),
+  { ssr: false }
+);

src/containers/boris/BorisComments/index.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { Group } from '~/components/containers/Group';
 import { Footer } from '~/components/main/Footer';
-import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { isSSR } from '~/constants/ssr';
 import { NodeComments } from '~/containers/node/NodeComments';
@@ -40,7 +40,7 @@ const BorisComments: FC<IProps> = () => {
     >
       <Group>
         {(isUser || isSSR) && (
-          <NodeCommentForm user={user} nodeId={node.id} saveComment={onSaveComment} />
+          <NodeCommentFormSSR user={user} nodeId={node.id} saveComment={onSaveComment} />
         )}
 
         {isLoading || !comments?.length ? (

src/containers/boris/BorisSuperpowers/index.tsx

@@ -10,27 +10,29 @@ import { useShowModal } from '~/hooks/modal/useShowModal';
 
 import styles from './styles.module.scss';
 
-interface BorisSuperpowersProps { }
+export interface BorisSuperpowersProps {}
-
-
 
 const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
-    const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
+  const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
-    const { push } = useRouter();
+  const { push } = useRouter();
 
-    return (
+  return (
-        <Group>
+    <Group>
-            <h2>Штучи, находящиеся в разработке</h2>
+      <h2>Штучи, находящиеся в разработке</h2>
 
-            <div className={styles.grid}>
+      <div className={styles.grid}>
-                <Button size="mini" onClick={() => openProfileSidebar({})}>Открыть</Button>
+        <Button size="mini" onClick={() => openProfileSidebar({})}>
-                <div className={styles.label}>Профиль в сайдбаре</div>
+          Открыть
+        </Button>
+        <div className={styles.label}>Профиль в сайдбаре</div>
 
-                <Button size="mini" onClick={() => push(URLS.SETTINGS.BASE)}>Открыть</Button>
+        <Button size="mini" onClick={() => push(URLS.SETTINGS.BASE)}>
-                <div className={styles.label}>Профиль на отдельной странице</div>
+          Открыть
-            </div>
+        </Button>
-        </Group>
+        <div className={styles.label}>Профиль на отдельной странице</div>
-    );
+      </div>
-}
+    </Group>
+  );
+};
 
-export default BorisSuperpowers;
+export { BorisSuperpowers };

src/containers/boris/BorisSuperpowers/ssr.tsx

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+import type { BorisSuperpowersProps } from './index';
+
+export const BorisSuperPowersSSR = dynamic<BorisSuperpowersProps>(
+  () => import('~/containers/boris/BorisSuperpowers/index')
+    .then(it => it.BorisSuperpowers),
+  {
+    ssr: false,
+    loading: () => <div />,
+  }
+);

src/containers/main/Header/index.tsx

@@ -21,7 +21,7 @@ import { useUpdates } from '~/hooks/updates/useUpdates';
 
 import styles from './styles.module.scss';
 
-type HeaderProps = {};
+export interface HeaderProps {}
 
 const Header: FC<HeaderProps> = observer(() => {
   const labStats = useGetLabStats();

src/containers/main/Header/ssr.tsx

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+import type { HeaderProps } from '~/containers/main/Header/index';
+
+import styles from './styles.module.scss';
+
+export const HeaderSSR = dynamic<HeaderProps>(() => import('./index').then(it => it.Header), {
+  ssr: false,
+  loading: () => <div className={styles.wrap} />,
+});
+
+export const HeaderSSRPlaceholder = () => <div className={styles.wrap} />;

src/containers/main/Header/styles.module.scss

@@ -1,5 +1,16 @@
 @import "../../../styles/variables";
 
+@keyframes appear {
+  from {
+    opacity: 0;
+    transform: translate(0, -$header_height);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
 .wrap {
   height: $header_height;
   z-index: 25;
@@ -10,7 +21,8 @@
   align-items: stretch;
   justify-content: center;
   box-sizing: border-box;
-  transition: background-color 0.5s;
+  transition: background-color 0.75s;
+  animation: appear 500ms forwards;
 
   @include desktop {
     height: 64px;

src/containers/main/SidebarRouter/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { SubmitBar } from '~/components/bars/SubmitBar';
+import { SubmitBarSSR } from '~/components/bars/SubmitBar/ssr';
 import { Authorized } from '~/components/containers/Authorized';
 
 interface IProps {
@@ -10,7 +10,7 @@ interface IProps {
 
 const SidebarRouter: FC<IProps> = ({ isLab }) => (
   <Authorized>
-    <SubmitBar isLab={isLab} />
+    <SubmitBarSSR isLab={isLab} />
   </Authorized>
 );
 

src/containers/node/NodeBottomBlock/index.tsx

@@ -4,7 +4,7 @@ import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
 import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
-import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
@@ -51,7 +51,7 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
             </article>
 
             {isUser && !isLoading && (
-              <NodeCommentForm nodeId={node.id} saveComment={onSaveComment} user={user} />
+              <NodeCommentFormSSR nodeId={node.id} saveComment={onSaveComment} user={user} />
             )}
           </Group>
 

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'), {
+const BorisLayout: FC<IProps> = observer(
-  ssr: false,
+  ({ 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 }) => {
+    return (
-  const { isUser } = useAuthProvider();
+      <Container>
-  const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
+        <div className={styles.wrap}>
-  const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [stats.backend.comments.by_month]);
+          <div className={styles.cover} />
 
-  return (
+          <div className={styles.image}>
-    <Container>
+            <div className={styles.caption}>
-      <div className={styles.wrap}>
+              <div className={styles.caption_text}>{title}</div>
-        <div className={styles.cover} />
+            </div>
 
-        <div className={styles.image}>
+            <img src="/images/boris_robot.svg" alt="Борис" />
-          <div className={styles.caption}>
-            <div className={styles.caption_text}>{title}</div>
           </div>
 
-          <img src="/images/boris_robot.svg" alt="Борис" />
+          <div className={styles.container}>
-        </div>
+            <Card className={styles.content}>
+              <Group>
+                <Superpower>
+                  <BorisSuperPowersSSR />
+                </Superpower>
 
-        <div className={styles.container}>
+                <BorisGraphicStats
-          <Card className={styles.content}>
+                  totalComments={stats.backend.comments.total}
-            <Group>
+                  commentsByMonth={commentsByMonth}
-              <Superpower>
+                  totalNodes={stats.backend.nodes.total}
-                <Suspense fallback={<div />}>
+                  nodesByMonth={nodesByMonth}
-                  <BorisSuperPowers />
+                />
-                </Suspense>
-              </Superpower>
 
-              <BorisGraphicStats
+                <BorisComments />
-                totalComments={stats.backend.comments.total}
+              </Group>
-                commentsByMonth={commentsByMonth}
+            </Card>
-                totalNodes={stats.backend.nodes.total}
-                nodesByMonth={nodesByMonth}
-              />
 
-              <BorisComments />
+            <Group className={styles.stats}>
+              <Sticky>
+                <BorisSidebar
+                  isTester={isTester}
+                  stats={stats}
+                  setBetaTester={setIsBetaTester}
+                  isUser={isUser}
+                  isLoading={isLoadingStats}
+                />
+              </Sticky>
             </Group>
-          </Card>
+          </div>
-
-          <Group className={styles.stats}>
-            <Sticky>
-              <BorisSidebar
-                isTester={isTester}
-                stats={stats}
-                setBetaTester={setIsBetaTester}
-                isUser={isUser}
-                isLoading={isLoadingStats}
-              />
-            </Sticky>
-          </Group>
         </div>
-      </div>
 
-      <SidebarRouter prefix="/" />
+        <SidebarRouter prefix="/" />
-    </Container>
+      </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>

yarn.lock

@@ -742,9 +742,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001283:
-  version "1.0.30001303"
+  version "1.0.30001367"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001303.tgz#9b168e4f43ccfc372b86f4bc5a551d9b909c95c9"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001367.tgz"
-  integrity sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ==
+  integrity sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw==
 
 chalk@^2.0.0:
   version "2.4.2"