// src/app/quiz-complete/page.tsximport { useRouter } from 'next/navigation';export default function QuizComplete({ searchParams,}: { searchParams: QuizResult;}) { // Error: useRouter only works in Client Components const router = useRouter(); // Strip all the query params. This attempt fails // because of aforementioned error. router.replace('/quiz-complete', {scroll: false}); return (<><Header /><QuizResultsGrid result={searchParams} /></> );}How do I remove the quiz answers query params from the URL from a Server Component in Next JS (version 14)?
I received the result of a survey as query params. Now I would like to interpret the results for the user, display the results, and remove the query params from the URL.
- Why remove the query params? Don't want the results refresh-able, and for aesthetics of not having query params in the URL.
I'm making this assumption: it's better to have the page dynamically rendered than statically generated (SSG); hence, I'm using searchParams as a property instead of useSearchParams:
- dynamically rendered content is rendered at request time; can't use CDN to cache request
- SSG will cause my page to have all of its html built at build time, cached, and available through CDNs. Downside is that the page will need to be hydrated on the client for every request.
If this assumption is wrong, let me know. But if not, I'm trying to avoid using 'use client' directive because then I'd end up making my entire page a Client Component.