Preventing full reload when pathname stays the same but the searchParams change?

Unanswered

Jumbo flying squid posted this in #help-forum

Jumbo flying squidOP

2023-10-13T00:41:06.000Z

Hey all, in my application I have the following page component which fetches the users survey and tracks progress via searchParams as such:

src/app/take/survey/[surveyId]/page.jsx
export default async function TakeSurveyPage({ params, searchParams }) {
  const { surveyId } = params;
  const activeIndex = searchParams?.prompt || 1;
  const prompts = await getSurvey(surveyId);

  return (
    <div className="flex h-screen flex-col py-8">
      <SurveyProgressBar percentComplete={10} />
      <SurveyPrompts
        {...{ prompts, updatePrompt }}
        activePrompt={activeIndex}
      />
    </div>
  );
}

Here's my component for navigating the survey if that makes a difference:

src/components/surveys/ChangePromptArrow.jsx
"use client";
import { ArrowLeft, ArrowRight } from "@/assets/ArrowIcons";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function ChangePromptArrows({
  promptOrder,
  firstPrompt,
  lastPrompt,
}) {
  const pathname = usePathname();
  return (
    <div>
      {!firstPrompt && (
        <Link href={pathname + "?prompt=" + (promptOrder - 1)}>
          <ArrowLeft className="inline" />
        </Link>
      )}
      {!lastPrompt && (
        <Link href={pathname + "?prompt=" + (promptOrder + 1)}>
          <ArrowRight className="inline" />
        </Link>
      )}
    </div>
  );
}

My question is is there a way to handle this without getSurveys() being called everytime the prompt searchParam changes? I only want it called on user's initial visit to the page.

I'm pretty new to using Next.js specifically but am experienced with react. If there's a better alternative way of handling this please let me know!

4 Replies

Jumbo flying squidOP

2023-10-13T18:09:26.000Z

bumping this

Mugger Crocodile

2023-10-13T18:22:31.000Z

Maybe try prefetch={false} - https://nextjs.org/docs/pages/api-reference/components/link#prefetch

@Mugger Crocodile Maybe try prefetch={false} - https://nextjs.org/docs/pages/api-reference/components/link#prefetch

Jumbo flying squidOP

2023-10-13T18:50:21.000Z

Still calls the getSurvey function each time, which I suppose makes sense as if searchParams are passed as a prop to the component exported by the page.jsx file then it would always rerender the component. Closest I got to what I was looking for was using window.history.pushState(), which changes the url but the page doesn't reflecte the updated search queries.

At this point I can't think of an option other than passing the collected prompts into a client component and tracking the state there with useState() as opposed to using the query parameters to track it.

Thanks for the idea though!