How to properly implement Next.js 15 Partial Prerendering (PPR) with dynamic Mongoose queries?

Home

Community

Collections

Find Jobs

How to properly implement Next.js 15 Partial Prerendering (PPR) with dynamic Mongoose queries?

asked 75 days ago

I am trying to optimize the performance of my DevFlow home page using Next.js 15's Partial Prerendering (PPR).

My goal is to make the static layout shells (like the navbar, sidebar, and search container) load instantly from the CDN, while the central question feed—which fetches live data via Mongoose from MongoDB Atlas—streams in via a loading skeleton once the database finishes responding.

However, when I enable PPR in my next.config.ts, the entire page still blocks and waits for the Mongoose query to resolve, making it behave like a fully server-side rendered (SSR) page instead of streaming components incrementally.

Here is my current page structure:

1// app/(root)/(home)/page.tsx
2import QuestionCard from "@/components/cards/QuestionCard";
3import HomeFilters from "@/components/home/HomeFilters";
4import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
5import { getQuestions } from "@/lib/actions/question.action";
6
7export default async function Home() {
8  // Mongoose query fetching dynamic database documents
9  const result = await getQuestions({});
10
11  return (
12    <>
13      <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
14        <h1 className="h1-bold text-dark100_light900">All Questions</h1>
15      </div>
16
17      <LocalSearchbar route="/" iconPosition="left" imgUrl="/assets/icons/search.svg" placeholder="Search questions..." />
18      <HomeFilters />
19
20      <div className="mt-10 flex w-full flex-col gap-6">
21        {result.questions.map((question) => (
22          <QuestionCard key={question._id} _id={question._id} title={question.title} tags={question.tags} author={question.author} upvotes={question.upvotes} views={question.views} answers={question.answers} createdAt={question.createdAt} />
23        ))}
24      </div>
25    </>
26  );
27}

1// app/(root)/(home)/page.tsx
2import QuestionCard from "@/components/cards/QuestionCard";
3import HomeFilters from "@/components/home/HomeFilters";
4import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
5import { getQuestions } from "@/lib/actions/question.action";
6
7export default async function Home() {
8  // Mongoose query fetching dynamic database documents
9  const result = await getQuestions({});
10
11  return (
12    <>
13      <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
14        <h1 className="h1-bold text-dark100_light900">All Questions</h1>
15      </div>
16
17      <LocalSearchbar route="/" iconPosition="left" imgUrl="/assets/icons/search.svg" placeholder="Search questions..." />
18      <HomeFilters />
19
20      <div className="mt-10 flex w-full flex-col gap-6">
21        {result.questions.map((question) => (
22          <QuestionCard key={question._id} _id={question._id} title={question.title} tags={question.tags} author={question.author} upvotes={question.upvotes} views={question.views} answers={question.answers} createdAt={question.createdAt} />
23        ))}
24      </div>
25    </>
26  );
27}