#On-demand ISR in app router with generateStaticParams

1 messages · Page 1 of 1 (latest)

hollow sierraBOT Jun 3, 2024, 11:38 AM

Hi @smoky granite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Yes, you can use on-demand Incremental Static Regeneration (ISR) in the app router with generateStaticParams for fetching data. The generateStaticParams function is used to statically generate routes at build time, and you can enable ISR to revalidate these pages on-demand.

Here is an example of how you can set this up:

Define generateStaticParams: This function will fetch the initial data and generate static parameters for your dynamic routes.
Enable ISR: Use the revalidate option in your fetch request to enable ISR.
Fetch Data in an Action File: You can create an action file such as actions/getEvents.ts to fetch data.

Here is a complete example:

// src/app/[slug]/page.tsx

import { getEvents } from '@/actions/getEvents';

export async function generateStaticParams() {
  const events = await getEvents();
  return events.map(event => ({
    slug: event.slug,
  }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
  const event = await getEvents(slug);

  if (!event) {
    notFound();
  }

  return (
    <main>
      <div>{slug}</div>
      <div>{JSON.stringify(event)}</div>
    </main>
  );
}

// src/actions/getEvents.ts

export async function getEvents(slug?: string) {
  const res = await fetch(`<https://api.example.com/events${slug> ? `/${slug}` : ''}`, {
    next: { revalidate: 10 }, // Enable ISR with a revalidation time of 10 seconds
  });

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

In this example:

The generateStaticParams function fetches the initial list of events and generates static parameters for each event.
The getEvents function in actions/getEvents.ts fetches event data and enables ISR with a revalidation time of 10 seconds.
The Page component fetches the event data for a specific slug and renders it.

For more information on using ISR with Next.js in the App router, you can refer to the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating).

This setup ensures that your dynamic routes are statically generated at build time and can be revalidated on-demand using ISR.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@smoky granite kapa.ai is still learning and improving, please let us know how it did by reacting below

smoky granite Jun 3, 2024, 11:41 AM

@hollow sierra can you show it to me in action using this function?: import prisma from '@/app/libs/prismadb';

type WhereConditionsType = {
status: {
not: string;
};
categories?: {
has: string;
};
region?: string;
};

export default async function getEventsByCategoryAndRegion(
category?: string,
region?: string,
) {
const whereConditions: WhereConditionsType = {
status: { not: 'pending' },
};

if (category) {
whereConditions['categories'] = { has: category };
}

if (region) {
whereConditions['region'] = region;
}

try {
const events = await prisma.event.findMany({
where: whereConditions,
orderBy: {
startDate: 'asc',
},
});

return events;

} catch (error: any) {
throw new Error(error);
}
}

hollow sierraBOT Jun 3, 2024, 11:41 AM

Let me check the knowledge base for you. One moment! :books:

Certainly! Below is an example of how you can use on-demand ISR in the app router with generateStaticParams for fetching data using the getEventsByCategoryAndRegion function.

Step 1: Define `generateStaticParams`

This function will fetch the initial data and generate static parameters for your dynamic routes.

// src/app/[category]/[region]/page.tsx

import getEventsByCategoryAndRegion from '@/app/libs/prismadb';

export async function generateStaticParams() {
  const events = await getEventsByCategoryAndRegion();
  const params = events.map(event => ({
    category: event.categories[0], // Assuming categories is an array
    region: event.region,
  }));

  return params;
}

export default async function Page({ params }: { params: { category: string, region: string } }) {
  const { category, region } = params;
  const events = await getEventsByCategoryAndRegion(category, region);

  if (!events.length) {
    notFound();
  }

  return (
    <main>
      <h1>Events in {region} for {category}</h1>
      <ul>
        {events.map(event => (
          <li key={event.id}>{event.name}</li>
        ))}
      </ul>
    </main>
  );
}

Step 2: Fetch Data in an Action File

Here is the getEventsByCategoryAndRegion function that fetches data from Prisma.

// src/app/libs/prismadb.ts

import prisma from '@/app/libs/prismadb';

type WhereConditionsType = {
  status: {
    not: string;
  };
  categories?: {
    has: string;
  };
  region?: string;
};

export default async function getEventsByCategoryAndRegion(
  category?: string,
  region?: string,
) {
  const whereConditions: WhereConditionsType = {
    status: { not: 'pending' },
  };

  if (category) {
    whereConditions['categories'] = { has: category };
  }

  if (region) {
    whereConditions['region'] = region;
  }