refactor(blog): use SSR to render index

apps/blog/src/app/(index)/Container.tsx

@@ -1,21 +1,17 @@
-'use client';
-
 import type {Metadata} from 'next';
 
 import {IndexView} from '@/src/app/(index)/View';
-import {useArticlesWithAbstract} from '@/src/hooks/useArticlesWithAbstract';
+
+import {IndexViewModel} from './IndexViewModel';
 
 export const metadata: Metadata = {
   title: 'Soulike 的博客',
 };
 
-export function Index() {
-  const {loading, articlesWithAbstract} = useArticlesWithAbstract();
+export async function Index() {
+  const articlesWithAbstract = await IndexViewModel.getArticlesWithAbstract();
 
   return (
-    <IndexView
-      articlesWithAbstract={articlesWithAbstract ?? []}
-      loading={loading}
-    />
+    <IndexView articlesWithAbstract={articlesWithAbstract} loading={false} />
   );
 }

apps/blog/src/app/(index)/IndexViewModel.ts

@@ -0,0 +1,14 @@
+import {Article} from '@website/classes';
+
+import {Article as ArticleApi} from '@/src/apis';
+
+export class IndexViewModel {
+  public static async getArticlesWithAbstract(): Promise<Article[]> {
+    const response = await ArticleApi.getAllWithAbstract();
+    if (response.isSuccessful) {
+      return response.data;
+    } else {
+      throw new Error(response.message);
+    }
+  }
+}

apps/blog/src/components/ArticleList/Component/ArticlePreviewCard/Container.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import {type Category} from '@website/classes';
-import {useMathJax, useMdConverter} from '@website/hooks';
+import {useMdConverter} from '@website/hooks';
 
 import {ArticlePreviewCardView} from './View';
 
@@ -18,11 +20,9 @@ export function ArticlePreviewCard(props: IArticlePreviewCardProps) {
   const {loading: mdConverterLoading, html: articleBriefTextHtml} =
     useMdConverter(articleBriefTextMarkdown);
 
-  const {loading: mathJaxLoading} = useMathJax([articleBriefTextHtml]);
-
   return (
     <ArticlePreviewCardView
-      loading={mdConverterLoading || mathJaxLoading}
+      loading={mdConverterLoading}
       articleBriefTextHtml={articleBriefTextHtml ?? ''}
       {...restProps}
     />

apps/blog/src/components/ArticleList/Container.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {type Article, type Category} from '@website/classes';
+import {useMathJax} from '@website/hooks';
 import type {PaginationConfig} from 'antd/lib/pagination';
 import {useCallback, useMemo, useRef, useState} from 'react';
 
@@ -15,7 +16,7 @@ interface IProps {
 
 export function ArticleList(props: IProps) {
   const viewRef = useRef<HTMLDivElement>(null);
-  const [, setPageNumber] = useState(1);
+  const [pageNumber, setPageNumber] = useState(1);
   const {categories, loading: categoriesIsLoading} = useCategories();
 
   const {articleList, loading} = props;
@@ -38,12 +39,19 @@ export function ArticleList(props: IProps) {
 
       viewRef.current.scrollIntoView(true);
     },
-    [viewRef.current],
+    [],
   );
 
+  // TODO: bug: math render when page changes
+  const {loading: mathJaxLoading} = useMathJax([
+    articleList,
+    categoryMap,
+    pageNumber,
+  ]);
+
   const isLoading = useMemo(
-    () => loading || categoriesIsLoading,
-    [categoriesIsLoading, loading],
+    () => loading || categoriesIsLoading || mathJaxLoading,
+    [categoriesIsLoading, loading, mathJaxLoading],
   );
 
   return (

packages/hooks/src/useMathJax.ts

@@ -13,14 +13,11 @@ export function useMathJax(deps: Readonly<DependencyList>) {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!document) {
-      return;
-    }
     setLoading(true);
     TexRenderer.renderAllTex().finally(() => {
       setLoading(false);
     });
-  }, [...deps, document]);
+  }, [...deps]);
 
   return {loading};
 }