Prerendering is failed on production while deploying to Vercel

Answered

Hassib posted this in #help-forum

2024-04-05T12:37:13.000Z

I have a next.js app which is developed using the App Router version of Next.js, everything is working perfect on local environment but when it's deployed on Vercel, it throws me the following error:

Answered by Ray

you shouldn't fetch route handler in server component

View full answer

31 Replies

HassibOP

2024-04-05T12:37:35.000Z

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async u (/vercel/path0/.next/server/app/departments/page.js:1:4571)
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async Promise.all (index 1)
    at async _ (/vercel/path0/.next/server/app/page.js:6:3977)
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async Promise.all (index 0)
    at async _ (/vercel/path0/.next/server/app/page.js:6:3977)
Error occurred prerendering page "/doctors". Read more: https://nextjs.org/docs/messages/prerender-error

Ray

2024-04-05T12:40:13.000Z

https://nextjs-faq.com/fetch-api-in-rsc
are you fetching own api endpoint on the page?

HassibOP

2024-04-05T12:41:04.000Z

I'm using Prisma and the built-in functionality of Next.js API:

import { NextResponse } from "next/server"
import prisma from "@/lib/prisma"

export async function GET(req) {
  const searchParams = req.nextUrl.searchParams
  const queryLimit = searchParams.get("limit")

  const limit = queryLimit ? Number(queryLimit) : undefined

  const service = await prisma.Service.findMany({
    take: limit,
    select: {
      id: true,
      name: true,
      imageUrl: true,
      excerpt: true,
    },
  })

  return NextResponse.json(service)
}

@Ray

And then I'm using the endpoint as below in the page.jsx file:

import Header from "@/components/Header"
import Hero from "@/components/Hero"
import Features from "@/components/Features"
import Departments from "@/components/Departments"
import Appointment from "@/components/Appointment"
import Doctors from "@/components/Doctors"
import Emergency from "@/components/Emergency"
import Footer from "@/components/Footer"

import { getLimitDoctors } from "@/services/doctor"
import { getLimitServices } from "@/services/service"

export default async function HomePage() {
  const [
    doctors,
    services,
  ] = await Promise.all([
    getLimitDoctors(),
    getLimitServices(),
  ])

  return (
    <>
      <Header />

      <main>
        <Hero />
        <Features />
        <Departments services={services} />
        <Appointment />
        <Doctors doctors={doctors} />
        <Emergency />
      </main>

      <Footer />
    </>
  )
}

@Hassib I'm using Prisma and the built-in functionality of Next.js API: js import { NextResponse } from "next/server" import prisma from "@/lib/prisma" export async function GET(req) { const searchParams = req.nextUrl.searchParams const queryLimit = searchParams.get("limit") const limit = queryLimit ? Number(queryLimit) : undefined const service = await prisma.Service.findMany({ take: limit, select: { id: true, name: true, imageUrl: true, excerpt: true, }, }) return NextResponse.json(service) }

Ray

2024-04-05T12:42:06.000Z

and are you fetching this route handler on the page?

HassibOP

2024-04-05T12:42:51.000Z

The services mentioned are implemented like this:

export async function getLimitDoctors() {
  const response = await fetch(`${API_URL}/doctor?limit=7`, {
    method: "GET",
  })

  return response.json()
}

@Hassib The services mentioned are implemented like this: js export async function getLimitDoctors() { const response = await fetch(`${API_URL}/doctor?limit=7`, { method: "GET", }) return response.json() }

Ray

2024-04-05T12:43:59.000Z

yes, read this article https://nextjs-faq.com/fetch-api-in-rsc

Ray

2024-04-05T12:44:13.000Z

you shouldn't fetch route handler in server component

Answer

Ray

2024-04-05T12:44:37.000Z

and this https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them#using-route-handlers-with-server-components

HassibOP

2024-04-05T12:47:10.000Z

Okay, let me try that and will get back to you

@Hassib Okay, let me try that and will get back to you

Ray

2024-04-05T12:48:27.000Z

basically, move the code from the route handler to getLimitDoctors function

HassibOP

2024-04-05T13:08:45.000Z

Thank you, it worked! â¤ï¸

@Hassib Thank you, it worked! â¤ï¸

Ray

2024-04-05T13:09:17.000Z

you're welcome

HassibOP

2024-04-05T13:09:32.000Z

Just another quick question, does Next.js cache Prisma result?

@Hassib Just another quick question, does Next.js cache Prisma result?

Ray

2024-04-05T13:10:20.000Z

no you would need to use unstable_cache with it

HassibOP

2024-04-05T13:10:55.000Z

I mean, Next.js fetch API has the cache param, is the Prisma result fetching again and again on every request on the server?

@Hassib I mean, Next.js fetch API has the `cache` param, is the Prisma result fetching again and again on every request on the server?

Ray

2024-04-05T13:11:11.000Z

yes

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries

HassibOP

2024-04-05T13:26:17.000Z

So there are two options to cache the result when using a third-party library that doesn't support or expose fetch (for example, a database, CMS, or ORM client),

1. Using the cache of the React
2. Using the unstable_cache

Is this correct? @Ray

@Hassib So there are two options to cache the result when using a third-party library that doesn't support or expose fetch (for example, a database, CMS, or ORM client), 1. Using the `cache` of the React 2. Using the `unstable_cache` Is this correct? <@743561772069421169>

Ray

2024-04-05T13:27:03.000Z

the cache from react doesn't cache the result

its mainly for deduplication

HassibOP

2024-04-05T13:30:05.000Z

But the documentation says that it memoizes data requests,
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example

Am I confused with the caching and memoizationing data request terms?

@Hassib But the documentation says that it memoizes data requests, https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example Am I confused with the caching and memoizationing data request terms?

Ray

2024-04-05T13:31:20.000Z

yes it memoize the data request and its clear after the request

https://react.dev/reference/react/cache#caveats

HassibOP

2024-04-05T13:36:52.000Z

Ahh, the mystery in my mind has been solved.
So basically, the cache from react just memoizes the request data for each server request and the unstable_cache caches data and it works for multiple requests, right?

@Hassib Ahh, the mystery in my mind has been solved. So basically, the `cache` from react just memoizes the request data for each server request and the `unstable_cache` caches data and it works for multiple requests, right?

Ray

2024-04-05T13:37:39.000Z

yes unstable_cache will store the result to data cache which persists across deployments

like the fetch cache option does

HassibOP

2024-04-05T13:38:51.000Z

Okay, got it.
How can I declare the revalidation time in unstable_cache?

@Hassib Okay, got it. How can I declare the revalidation time in `unstable_cache`?

Ray

2024-04-05T13:39:46.000Z

const getCachedUser = unstable_cache(
  async (id) => getUser(id),
  ['my-app-user'],
  {
    revalidate: 30 // 30 sec
  }
);

HassibOP

2024-04-05T13:41:03.000Z

Can't thank you enough! â¤ï¸