feat: 调整前端blog列表为服务端渲染模式

apps/frontend/app/(with-header-footer)/blog/page.tsx

@@ -1,9 +1,5 @@
-"use client"
-
-import { Skeleton } from "@/components/ui/skeleton";
 import { BlogApi } from "@/lib/api";
 import { useCallback } from "react"
-import useSWR from "swr";
 import {
     Alert,
     AlertDescription,
@@ -12,7 +8,7 @@ import {
 import { AlertCircle } from "lucide-react";
 import { base62 } from "@/lib/utils";
 
-export default function Blog() {
+export default async function Blog() {
     const formatNumber = useCallback((num: number) => {
         if (num >= 1000) {
             return (num / 1000).toFixed(1) + 'K';
@@ -22,29 +18,18 @@ export default function Blog() {
         return num.toString();
     }, []);
 
-    const { data: blogs, error, isLoading } = useSWR(
+    let errorMsg = '';
-        '/api/blogs',
+    const blogs = await BlogApi.list().catch(e => { errorMsg = `${e}`; return null });
-        () => BlogApi.list(),
-    )
 
     return (
         <div className="max-w-120 w-auto mx-auto my-10 flex flex-col gap-8">
             {
-                isLoading && (
+                errorMsg && (
-                    <div className="w-full">
-                        <Skeleton className="w-full h-5" />
-                        <Skeleton className="w-full h-10 mt-1" />
-                        <Skeleton className="w-full h-5 mt-5" />
-                    </div>
-                )
-            }
-            {
-                error && (
                     <Alert variant="destructive" className="w-full">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>出错啦</AlertTitle>
                         <AlertDescription>
-                            {error.message}
+                            {errorMsg}
                         </AlertDescription>
                     </Alert>
                 )

apps/frontend/lib/api/blog/list.ts

@@ -1,6 +1,6 @@
 import { Blog } from "@/lib/types/blog";
-import fetcher from "../fetcher";
+import { apiFetch } from "../client";
 
 export async function list() {
-    return fetcher<Blog[]>('/api/blog');
+    return apiFetch<Blog[]>('/api/blog');
 }