Next.js Discord

Discord Forum

Next Attempting to Prerender Dynamic Page

Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Hello

I am trying to fetch some data from a database when a page is fetched. I am attempting to use ISR with /app router.

Here's the code for my page...

import BackButtons from "@/components/not-found/BackButtons";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import FetchDogInformation from "@/lib/db/dog/FetchDogInformation";
import IncrementDogViews from "@/lib/db/dog/IncrementDogViews";
import Image from "next/image";

export const revalidate = 10;

export default async function PageNotFound() {
    const imageSrc = await fetch("https://dog.ceo/api/breeds/image/random", {
        next: {
            revalidate,
        }
    })
        .then((res) => res.json())
        .then((data) => data.message);

    IncrementDogViews(imageSrc);
    const dogInfo = await FetchDogInformation(imageSrc);

    return (
        <div className="h-full w-full flex flex-col items-center gap-2">
            <div />
            <div className="w-[300px] max-h-[500px] flex flex-col gap-2 items-baseline">
                <Card className="overflow-clip">
                    <CardHeader className="p-3">
                        <CardTitle>
                            404 Page Not Found
                        </CardTitle>
                        <CardDescription>
                            We didn&apos;t find that page, but we did find this dog!
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="p-0">
                        <Image src={imageSrc} width={300} height={200} loading="eager" priority={true} alt="A random dog" className="object-cover max-h-[400px] w-full" />
                    </CardContent>
                </Card>
                <BackButtons />
                <div className="flex flex-row">
                    <p>{dogInfo.likes}</p>
                    <p>{dogInfo.views}</p>
                </div>
            </div>
        </div>
    )
}

3 Replies

Australian Freshwater CrocodileOP
Here's the build logs as well, you can see it attempt to make a call to the database... unsuccessfully.
Australian Freshwater CrocodileOP
I have found that this
let dogInfo = { likes: 0, views: 0 };
async function handle() {
    "use server";
    await IncrementDogViews("dawg");
    dogInfo = await FetchDogInformation("dawg");
    console.log(dogInfo);
}
handle();

pattern compiles, but obviously doesn't work. While I'm not against something like this, I'm not knowledgeable enough about server components to get this to work.
It does allow me to make calls to my database though, which is one step I guess lol