Can you create shallow links in app router?

Unanswered

Siamese Crocodile posted this in #help-forum

Siamese CrocodileOP

2024-09-08T14:06:55.259Z

This code feels snappy because after clicking the link nextjs fetches RSC for route /?login-=true even tho we already have this RSC because we are just changing search params. No data should change. In the pages router there was an option to pass shallow to <Link /> - Is there something like this in app router?

// page.tsx
import Link from "next/link";
import { LoginDialog } from "./login-dialog";
import { Suspense } from "react";
import { cookies } from "next/headers";

export default function Home() {
  cookies();
  return (
    <div className="h-screen w-screen place-items-center">
      <Suspense>
        <LoginDialog>
          <Link
            href={{
              search: "?login=true",
            }}
          >
            Login
          </Link>
        </LoginDialog>
      </Suspense>
    </div>
  );
}

// login-dialog.tsx
"use client";

import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { useRouter, useSearchParams } from "next/navigation";

export function LoginDialog({ children }: { children: React.ReactNode }) {
  const searchParams = useSearchParams();
  const router = useRouter();

  const isOpen = searchParams.get("login") === "true";

  const closeDialog = () => {
    router.replace("/");
  };

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) {
          closeDialog();
        }
      }}
    >
      <DialogTrigger asChild>{children}</DialogTrigger>

      <DialogContent>Login</DialogContent>
    </Dialog>
  );
}

45 Replies

@Siamese Crocodile This code feels snappy because after clicking the link nextjs fetches RSC for route `/?login-=true` even tho we already have this RSC because we are just changing search params. No data should change. In the pages router there was an option to pass `shallow` to `<Link />` - Is there something like this in app router? ts // page.tsx import Link from "next/link"; import { LoginDialog } from "./login-dialog"; import { Suspense } from "react"; import { cookies } from "next/headers"; export default function Home() { cookies(); return ( <div className="h-screen w-screen place-items-center"> <Suspense> <LoginDialog> <Link href={{ search: "?login=true", }} > Login </Link> </LoginDialog> </Suspense> </div> ); } // login-dialog.tsx "use client"; import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; import { useRouter, useSearchParams } from "next/navigation"; export function LoginDialog({ children }: { children: React.ReactNode }) { const searchParams = useSearchParams(); const router = useRouter(); const isOpen = searchParams.get("login") === "true"; const closeDialog = () => { router.replace("/"); }; return ( <Dialog open={isOpen} onOpenChange={(open) => { if (!open) { closeDialog(); } }} > <DialogTrigger asChild>{children}</DialogTrigger> <DialogContent>Login</DialogContent> </Dialog> ); }

gin

2024-09-08T14:10:43.761Z

is this Dialog thing some kind of a modal

so u triggering the modal because useSearchParams triggers and rerenders the component and that opens the modal cause login is true right

what u can do is using router.replace in your page.tsx (putting into clientside)

that will change the path on the clientside only without triggering anything on the server

Siamese CrocodileOP

2024-09-08T14:18:19.797Z

It is a modal

gin

2024-09-08T14:18:33.957Z

do the thing i told u above

Siamese CrocodileOP

2024-09-08T14:18:43.343Z

I know I can push it client side

But I dont get it why cant i push it using a link

gin

2024-09-08T14:19:30.263Z

cause link is a extended href with integrated next app router

the use of that is just to have navigation without using clientside code

the implementation u have is weird idk

Siamese CrocodileOP

2024-09-08T14:31:50.759Z

"use client";

import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

export function LoginButton() {
  const router = useRouter();
  return <Button onClick={() => router.replace("?login=true")}>Login</Button>;
}

triggering dialog using router push also downloads rsc

on click

so its also snappy

idk

Siamese CrocodileOP

2024-09-08T14:39:38.618Z

"use client";

import { Button } from "@/components/ui/button";

export function LoginButton() {
  function openLoginDialog() {
    const params = new URLSearchParams();
    params.set("login", "true");
    window.history.pushState(null, "", `?${params.toString()}`);
  }

  return <Button onClick={openLoginDialog}>Login</Button>;
}