Issue: Why useSearchParams should be wrapped in a suspense boundary, if I used 'use client'?

[WebKieth]

Code, which is generate an error.

"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { loginByToken, logoutUser } from "@/store/api/auth";
import { useAppSelector } from "@/store/hooks";

export default function CallbackPage() {
  const [status, setStatus] = useState("Авторизация...");
  const router = useRouter();
  const params = useSearchParams();
  const { isAuthenticated } = useAppSelector(state => state.user);
  useEffect(() => {
    const token = params.get("login-by-token");
    if (!token) {
      setStatus("Токен отсутствует");
      return;
    }
    const run = async () => {
      if (isAuthenticated) {
        await logoutUser();
      }
      try {
        await loginByToken(token);
        setStatus("Успешный вход, перенаправление...");
        router.push("/");
      } catch (e) {
        console.error(e);
        setStatus("Ошибка входа");
      }
    };
    run();
  }, [router, isAuthenticated]);

  return (
    <div>
      <p>{status}</p>
    </div>
  );
}

Working solution:

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { loginByToken, logoutUser } from "@/store/api/auth";
import { useAppSelector } from "@/store/hooks";

export default function CallbackPage() {
  const [status, setStatus] = useState("Авторизация...");
  const router = useRouter();
  const { isAuthenticated } = useAppSelector(state => state.user);
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const token = params.get("login-by-token");
    if (!token) {
      setStatus("Токен отсутствует");
      return;
    }
    const run = async () => {
      if (isAuthenticated) {
        await logoutUser();
      }
      try {
        await loginByToken(token);
        setStatus("Успешный вход, перенаправление...");
        router.push("/");
      } catch (e) {
        console.error(e);
        setStatus("Ошибка входа");
      }
    };
    run();
  }, [router, isAuthenticated]);

  return (
    <div>
      <p>{status}</p>
    </div>
  );
}

Firstly, I want to understand why you can't parse search params on server side and provide to client components? Is it too difficult task for nextjs developers team?

I will repeat my indignation - 15th version of product. You still can't do primitive functionality.
Maybe it's time to do it good?

[icyJoseph]

Hi,

You likely have seen that in dev mode things work fine. That's because the page is rendered on demand.

When you build, the page may be pre-rendered. During pre-rendering, there's no incoming request, so we cannot resolve any query parameters. To get around this, you have to use a Suspense wrapper, so that the part of the UI that uses the useSearchParams hook, is deferred to the client. Note that pre-rendering outputs a ready HTML page.

When you start, if the page is a so called, dynamic, on-demand SSR page, then useSearchParams has access to the search params, as one would expect. Otherwise, if the page was pre-rendered, then no SSR happens, only serving of static assets.

• https://nextjs.org/docs/app/api-reference/functions/use-search-params

Good to know: In development, all pages are rendered on-demand, so useSearchParams doesn't suspend. However, pre-rendering a static page that worked in development will fail the build if useSearchParams is used in a Client Component that isn’t directly or indirectly wrapped in a Suspense boundary.

Lastly use client doesn't mean client render only. Client Components are what we've had up to this point, even in Pages Router. In fact in Pages Router query params have also some special behavior when pre-rendering happens.

In other words, even with use client a component might be ssr'd, in the default rendering pass anyway.

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4
• https://nextjs.org/docs/app/getting-started/server-and-client-components#on-the-server

Client Components and the RSC Payload are used to prerender HTML.

So what you can do here, is either:

• opt-out from pre-rendering
• pre-render but wrap the Client Component that has useSearchParams with Suspense,
• or collect the searchParams from a parent server component page.

For the first, you can make your page.tsx like:

import { connection } from 'next/server'
import { CallbackPageUI } from './callback-ui'

export default async function Page() {
   await connection() // opt-out from pre-rendering
   return <CallbackPageUI />
}

And move your CallbackPage component into the a callback-ui.tsx file next to the page.tsx, for example.

I wonder if in your case you may want the server component result, depends on your intention.

I've been dropping improvements to the error page and documentation for this hook though.

[apostolos]

"use client" means the component's code will also run on the client (and probably uses hooks and has some kind of interactivity).

That doesn't mean it doesn't get rendered on the server. All your components are server-rendered in Next.js (SSR pass).

Server rendering has two modes:

1. Prerendering (static or partial) that happens during build.
2. SSR that happens on request time.

The parts of the page that are completely static (or depend on statically derived information, like route params), are rendered once and cached.

The parts of the page that are dynamic (depend on search params or headers, or cookies, etc), need to be wrapped in order for Next.js to know that they need to be rendered on demand.

That's the rule. If you follow it you'll be fine and you get amazing performance thrown in for free.

A workaround is to not useSearchParams, at all, and try to read searchParams from new URL(document.location.href) in a useEffect like SPA's do.