Use next/dynamic and remove hack for removing dynamic data

marshallku · May 6, 2024 · e5d9917 · e5d9917
1 parent d8ab865
commit e5d9917
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/apps/blog/app/[category]/[...slug]/page.tsx b/apps/blog/app/[category]/[...slug]/page.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import nextDynamic from "next/dynamic";
 import Link from "next/link";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
@@ -14,7 +15,6 @@ import { classNames, formatDate } from "@marshallku/utils";
 import MDXComponents from "#components/MDXComponents";
 import InteractPost from "#components/InteractPost";
 import Image from "#components/Image";
-import PostComment from "#components/PostComment";
 import PostList from "#components/PostList";
 import PrevNextPost from "#components/PrevNextPost";
 import Typography from "#components/Typography";
@@ -72,6 +72,9 @@ export async function generateStaticParams() {
 const cx = classNames(styles, "page");
 
 export default async function Post({ params: { category, slug } }: PostProps) {
+    const PostComment = nextDynamic(() => import("#components/PostComment"), {
+        ssr: false,
+    });
     const postSlug = `${category}/${slug.map((x) => decodeURIComponent(x)).join("/")}`;
     const post = getPostBySlug(postSlug);
 

diff --git a/apps/blog/src/components/PostComment/index.tsx b/apps/blog/src/components/PostComment/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useEffect, useMemo, useState } from "react";
+import { Suspense, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "@marshallku/react-error-boundary";
 import { classNames } from "@marshallku/utils";
@@ -16,26 +16,16 @@ const cx = classNames(styles, "post-comment");
 
 function PostComment({ slug }: PostCommentProps) {
     const queryClient = useMemo(() => new QueryClient(), []);
-    const [render, setRender] = useState(false);
-
-    useEffect(() => {
-        setRender(true);
-    }, []);
 
     return (
         <div className={cx()}>
             <QueryClientProvider client={queryClient}>
-                {/* HACK: Removing dynamic data while building application */}
-                {render && (
-                    <>
-                        <PostCommentForm slug={slug} />
-                        <ErrorBoundary fallback={null}>
-                            <Suspense fallback={null}>
-                                <Comments slug={slug} />
-                            </Suspense>
-                        </ErrorBoundary>
-                    </>
-                )}
+                <PostCommentForm slug={slug} />
+                <ErrorBoundary fallback={null}>
+                    <Suspense fallback={null}>
+                        <Comments slug={slug} />
+                    </Suspense>
+                </ErrorBoundary>
             </QueryClientProvider>
         </div>
     );