feat: fetch & cache data from 2 remote APIs test

Author: AlexStack

src/app/api/test/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
 
+// Test local NextJs API /api/test method GET with parameters
 export const GET = async (req: Request) => {
   const { searchParams } = new URL(req.url);
   const reqData = Object.fromEntries(searchParams);
@@ -10,6 +11,7 @@ export const GET = async (req: Request) => {
   });
 };
 
+// Test local NextJs API /api/test method POST with variables
 export const POST = async (req: Request) => {
   const reqData = await req.json();
   return NextResponse.json({

src/app/page.tsx

@@ -6,9 +6,22 @@ const loadDataFromApi = async (slug?: string) => {
     throw new Error('This is a ssr 500 test error');
   }
 
-  return await getApiResponse<{ version: string }>({
-    apiEndpoint: 'https://registry.npmjs.org/react/latest',
-  });
+  // Fetch & cache data from 2 remote APIs test
+  const [reactNpmData, nextJsNpmData] = await Promise.all([
+    getApiResponse<{ version: string }>({
+      apiEndpoint: 'https://registry.npmjs.org/react/latest',
+      revalidate: 60 * 60 * 24, // 24 hours cache
+    }),
+    getApiResponse<{ version: string }>({
+      apiEndpoint: 'https://registry.npmjs.org/next/latest',
+      revalidate: 0, // no cache
+    }),
+  ]);
+
+  return {
+    reactVersion: reactNpmData?.version,
+    nextJsVersion: nextJsNpmData?.version,
+  };
 };
 
 interface AppHomeProps {
@@ -18,5 +31,10 @@ interface AppHomeProps {
 export default async function AppHome({ searchParams }: AppHomeProps) {
   const apiResult = await loadDataFromApi(searchParams['slug']);
 
-  return <Homepage reactVersion={apiResult?.version} />;
+  return (
+    <Homepage
+      reactVersion={apiResult?.reactVersion}
+      nextJsVersion={apiResult?.nextJsVersion}
+    />
+  );
 }

src/component/Homepage.tsx

@@ -6,7 +6,10 @@ import PageFooter from '@/component/shared/PageFooter';
 import ReactHookForm from '@/component/shared/ReactHookForm';
 import { SITE_CONFIG } from '@/constant';
 
-export default function Homepage({ reactVersion = 'unknown' }) {
+export default function Homepage({
+  reactVersion = 'unknown',
+  nextJsVersion = 'unknown',
+}) {
   return (
     <main>
       <section>
@@ -33,7 +36,9 @@ export default function Homepage({ reactVersion = 'unknown' }) {
             gutterBottom
             sx={{ color: 'green', mt: 3 }}
           >
-            Get data from api test: The latest React version is {reactVersion}
+            Fetch & cache data from 2 remote APIs test: <br />
+            The latest React version is {reactVersion}, and the latest NextJs
+            version is {nextJsVersion}
           </Typography>
 
           <Box sx={{ m: 5 }}>
@@ -57,12 +62,14 @@ export default function Homepage({ reactVersion = 'unknown' }) {
               href='/api/test?from=github&nextjs=yes&mui=yes&tailwind=no'
               target='_blank'
             >
-              Test NextJs API method GET with parameters
+              Test local NextJs API /api/test method GET with parameters
             </Link>
           </Box>
 
           <Box sx={{ m: 5 }}>
-            <h4>Test NextJs API method POST with parameters</h4>
+            <h4>
+              Test local NextJs API /api/test method POST with form variables
+            </h4>
             <ReactHookForm />
           </Box>