How to fetch app/page data in Next13

Developing with Prismic
1

I am trying to setup Prismic with Next 13.4.2 and getting the following error:

"getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

When using

export async function getServerSideProps({ previewData }: IndexProps) {
    const client = createClient({ previewData });
    const page = await client.getSingle('homepage');

    return {
        props: {
            page,
        },
    };
}

The new Next docs are stating to use fetch() so I wondering how people are implementing this with Prismic?

Any help/advice would be appreciated.

2

You don't need to use getServerSideProps in the new app router.

You should be doing something like this in your page.tsx

import { createClient } from "@/prismicio";
import { SliceZone } from "@prismicio/react";
import { components } from "../slices";

const client = createClient();

export const revalidate = 0;

export async function generateMetadata() {
  const page = await client.getSingle("homepage");
  return {
    title: page.data.title,
    description: page.data.description,
  };
}

export default async function Home() {
  const page = await client.getSingle("homepage");
  return (
    <main>
      <SliceZone slices={page.data.slices} components={components} />
    </main>
  );
}

Have to use export const revalidate = 0 so that it fetches content each time. Was struggling with that.

1 Like
4

@frags thats worked! Thanks for the pointer and also the note about revalidate. Just had to google that and thats something good to know for the future.

1 Like
5

Hi @luke1 and @frags,

Prismic's Fetch Data Next.js documentation includes examples of querying content in the App Router.

The example is essentially equivalent to the one posted above:

import { createClient } from "@/prismicio";

export default async function Page({ params }) {
  const client = createClient();

  const page = await client.getByUID("page", params.uid);

  return <h1>{page.uid}</h1>;
}

As of @prismicio/client v7.0.0 and v6.8.0, you can specify cache: "force-cache" or cache: "no-store" using the fetchOptions parameter.

const client = prismic.createClient(repositoryName, {
  fetchOptions: {
    cache: "force-cache",

    // You can specify `next` options as needed:
    next: { revalidate: 0 },
  },
});

const page = await client.getByUID("page", "home", {
  fetchOptions: {
    // These options can be specified for a specific query as well.
    cache: "force-cache",
    next: { revalidate: 0 },
  }
})
1 Like
6

Thanks @angeloashmore - I hadn't noticed my client was old. Just upgraded to 7.0.0 and using the fetchOptions doesn't seem to pull the latest changes when in local dev.


export default async function Home({ params }: { params: Params }) {
  const client = createClient();

  const page = await client.getByUID("page", params.uid, {
    fetchOptions: {
      cache: "no-store",
      next: { revalidate: 0 },
    },
  });

//rest of code
1 Like
8

Could you clear your Next.js fetch cache and try again?

You can clear the cache by deleting the cache directory: .next/cache/fetch-cache.

Since you are using no-store, future requests shouldn't be added to the cache.

We will be releasing a CLI that automatically clears Prismic requests from that cache, which we will recommend calling before next dev or next build.

By the way, v7.0.0 and v6.8.0 were just released today and 2 days ago respectively. We wouldn't have expected you to already be using the latest version. :slight_smile:

In case you want a more detailed walkthrough of v7, check out this forum post: @prismicio/client v7 is now available

1 Like
9

Working now, thanks @angeloashmore !!! :grin:

I'm glad I wasn't being dumb about the latest releases too :sweat_smile:

1 Like
10

@angeloashmore when following your above example I get the following error?

Type '{ next: { revalidate: number; }; }' is not assignable to type 'RequestInitLike'. Object literal may only specify known properties, and 'next' does not exist in type 'RequestInitLike'.ts(2322) (property) revalidate: number

    const page = await client.getByUID('homepage', params.uid, {
        fetchOptions: {
          next: { revalidate: 0 },
        },
    });

Also can you use fetchOptions with client.getSingle?

1 Like
11

Hi @luke1,

Could
You update to the latest version of @prismicio/next? The latest version includes a bit of code that adds support for the next property in fetchOptions.

And yes, you can use fetchOptions when creating a Prismic client, which will apply those options to all queries, or you can use/override fetchOptions on a per-query basis. That includes getSingle() and all other methods that query for content.

A post about the latest @prismicio/next updates will be out soon. :+1: But just so you can feel confident updating, the latest version (v1.1.0) does not include any breaking changes; it mainly adds support for the App Routes.

1 Like