feat: 调整resource为服务端渲染

apps/backend/src/main.ts

@@ -5,6 +5,7 @@ import { ResponseInterceptor } from './common/interceptors/response.interceptor'
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.setGlobalPrefix('api');
   app.useGlobalPipes(
     new ValidationPipe({
       transform: true,

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

@@ -1,4 +1,3 @@
-'use client';
 import favicon from '../favicon.ico';
 import Image from 'next/image';
 

apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx

@@ -1,32 +1,20 @@
 import { ResourceBadge } from "@/components/resource";
 import { Card, CardContent } from "@/components/ui/card";
 import { Resource } from "@/lib/types/resource";
-import Image from "next/image";
-import React from "react";
+import ResourceCardImage from "./ResourceCardImage";
 
 interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
     r: Resource;
 }
 
 export function ResourceCard({ r, ...props }: ResourceCardProps) {
-    const [imageError, setImageError] = React.useState(false);
-
     return (
         <a href={r.link} target="_blank" {...props}>
             <Card className="w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300">
                 <CardContent>
                     <div className="flex gap-6">
                         <div>
-                            {!imageError && <Image
-                                src={r.imageUrl}
-                                alt="资源图片"
-                                width={90}
-                                height={90}
-                                className="rounded-md shadow"
-                                priority
-                                quality={80}
-                                onError={() => setImageError(true)}
-                            />}
+                            <ResourceCardImage imageUrl={r.imageUrl} />
                         </div>
                         <div className="flex-1 overflow-x-hidden">
                             <div className="font-bold text-2xl">{r.title}</div>

apps/frontend/app/(with-header-footer)/resource/components/ResourceCardImage.tsx

@@ -0,0 +1,26 @@
+'use client';
+import React from "react";
+import Image from "next/image";
+
+interface ResourceCardImage {
+    imageUrl: string;
+}
+
+export default function ResourceCardImage({ imageUrl }: ResourceCardImage) {
+    const [imageError, setImageError] = React.useState(false);
+
+    return (
+        <>
+            {!imageError && <Image
+                src={imageUrl}
+                alt="资源图片"
+                width={90}
+                height={90}
+                className="rounded-md shadow"
+                priority
+                quality={80}
+                onError={() => setImageError(true)}
+            />}
+        </>
+    )
+}

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

@@ -1,6 +1,3 @@
-"use client";
-
-import useSWR from "swr";
 import { ResourceCard } from "./components/ResourceCard";
 import { ResourceApi } from "@/lib/api";
 import {
@@ -9,13 +6,10 @@ import {
     AlertTitle,
 } from "@/components/ui/alert"
 import { AlertCircle } from "lucide-react";
-import { Skeleton } from "@/components/ui/skeleton";
 
-export default function Resources() {
-    const { data, isLoading, error } = useSWR(
-        '/api/resource',
-        () => ResourceApi.list(),
-    );
+export default async function Resources() {
+    let errorMsg = '';
+    const data = await ResourceApi.list().catch(e => { errorMsg = `${e}`; return null; });
 
     return (
         <div className="flex-1 flex flex-col items-center">
@@ -24,13 +18,13 @@ export default function Resources() {
                 <a className="text-zinc-600">《使用条款和隐私政策》</a>
                 ，继续使用或浏览表示您接受协议条款。</p>
             {
-                error && (
+                errorMsg && (
                     <div className="mt-10 mx-5">
                         <Alert variant="destructive">
                             <AlertCircle className="h-4 w-4" />
                             <AlertTitle>出错了</AlertTitle>
                             <AlertDescription>
-                                {error.message}
+                                {errorMsg}
                             </AlertDescription>
                         </Alert>
                     </div>
@@ -38,12 +32,6 @@ export default function Resources() {
             }
 
             <div className="mt-6 sm:mt-10 md:mt-15 w-full flex flex-col md:w-auto md:mx-auto md:grid grid-cols-2 2xl:gap-x-35 lg:gap-x-20 gap-x-10 lg:gap-y-10 gap-y-5 sm:mb-10 duration-300">
-                {isLoading && (
-                    [...Array(3).map((_, i) => (
-                        <Skeleton key={i} className="h-35 w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300" />
-                    ))]
-                )}
-
                 {data && data.map((resource) => (
                     <ResourceCard
                         key={resource.id}

apps/frontend/lib/api/client.ts

@@ -0,0 +1,34 @@
+// import { headers } from 'next/headers'
+
+export async function apiFetch<T extends unknown>(
+    url: string,
+    options: RequestInit = {}
+): Promise<T> {
+    // const nextHeaders = await headers()
+
+    const defaultHeaders: HeadersInit = {
+        'Content-Type': 'application/json',
+        // ...nextHeaders,
+    }
+
+    try {
+        const res = await fetch(new URL(url, process.env.API_BASE), {
+            ...options,
+            headers: {
+                ...defaultHeaders,
+                ...options.headers,
+            },
+            cache: 'no-store',
+        });
+        if (res.status === 200) {
+            const data = await res.json();
+            if (data.statusCode === 200) {
+                return data.data;
+            }
+            throw new Error(data.message ?? '未知错误');
+        }
+        throw new Error('请求失败');
+    } catch (error) {
+        throw error;
+    }
+}

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

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