How can I make my routers to be faster?

Unanswered

Muhammed Khal posted this in #help-forum

2023-10-05T10:19:54.000Z

Hai guys, I am using the use.router but it's so much slow compared to the link, how can I make it faster or any better replacement for it?

    const handleRoute = (projectId: string) => {
      switch (true) {
        case isClientPortal:
          router.push(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.push(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.push(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.push(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
    };
              <Card className=' mr-3' onClick={() => handleRoute(project.id)}>
        {/* content */}

</Card>

HOw can I make it to reload faster in the production

80 Replies

riský

2023-10-05T10:20:37.000Z

why don't you want to use next/link here?

Muhammed KhalOP

2023-10-05T10:24:41.000Z

You mean like

<Link href={routerLink}>
<Card>
</Card>
</Link>

But in some cases I can't use like in the table

<TableBody className='cursor-pointer'>
                {table?.getRowModel().rows?.length > 0 &&
                  table.getRowModel().rows.map((row) => (
                    <TableRow
                      key={row.id}
                      data-state={row.getIsSelected() && 'selected'}
                      onClick={() =>
                        router.push(
                          `/dashboard/clients/client-workspace/${row.original.id}`
                        )
                      }
                    >
                      {row.getVisibleCells().map((cell) => (
                        <TableCell key={cell.id} className='table-cell'>
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                          )}
                        </TableCell>
                      ))}
                    </TableRow>
                  ))}
              </TableBody>

When I add the link to that table, it's breaking the entire layout

  useEffect(() => {
    if (isAgency === false) {
      router.push('/client-dashboard');
    }
  }, [isAgency, router, session]);

And at there I am not sure how can I use the Link!!

riský

2023-10-05T10:26:16.000Z

anyway the issue is that next/link prefetches the links/pages, and with router, you have to manualy call .prefetch or smth

Muhammed KhalOP

2023-10-05T10:26:37.000Z

Can you please gimme the example how can I do prefetch?

I did tried like

router.prefetch('url')

BUt seems it doesn't work

riský

2023-10-05T10:27:19.000Z

prefetch before the onclick?

Muhammed KhalOP

2023-10-05T10:27:28.000Z

riský

2023-10-05T10:27:44.000Z

like put it in a useeffect, so when the page loads, they all load (like next/link would do)

Muhammed KhalOP

2023-10-05T10:28:08.000Z

const handleRoute = (projectId: string) => {
      switch (true) {
        case isClientPortal:
          router.push(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.push(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.push(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.push(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
    };
~

That one with push

and

const handleRoute = (projectId: string) => {
      switch (true) {
        case isClientPortal:
          router.prefetch(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.prefetch(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.prefetch(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.prefetch(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
    };

With prefetch

riský

2023-10-05T10:28:34.000Z

.prefetch is called ealier... and then you .push

Muhammed KhalOP

2023-10-05T10:28:55.000Z

you mean like
router.prefetch.push(url)

riský

2023-10-05T10:29:01.000Z

no...

you run the prefetch sometime.. and then later, you run .push and it would be already in cache, so very quick

Muhammed KhalOP

2023-10-05T10:30:43.000Z

Yes I understand that point but I am not sure how to implement it

I did like the code I sent you but that doesn't even working'

riský

2023-10-05T10:31:37.000Z

like i said... make a useEffect that runs prefetch on all your urls...

Muhammed KhalOP

2023-10-05T10:32:23.000Z

useEffect(() => {
router.prefetch(url)
},[router])

const handleRoute = (projectId: string) => {
      switch (true) {
        case isClientPortal:
          router.push(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.push(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.push(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.push(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
    };

Like that

riský

2023-10-05T10:33:44.000Z

try it...

Muhammed KhalOP

2023-10-05T10:33:51.000Z

Yes

riský

2023-10-05T10:34:03.000Z

and does it work better?

Muhammed KhalOP

2023-10-05T10:34:12.000Z

I am trying hehe

gimme a min

riský

2023-10-05T10:34:38.000Z

yeah, you have to use built version of nextjs to see it work (as dev doesn't do prefetch)

Muhammed KhalOP

2023-10-05T10:34:52.000Z

Ahh erk

  const handleRoute = (projectId: string) => {
        switch (true) {
    case isClientPortal:
      router.prefetch(`/client-dashboard/projects/${projectId}`);
      router.push(`/client-dashboard/projects/${projectId}`);
      break;
    case isClientWorkSpace:
      router.prefetch(`/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`);
      router.push(`/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`);
      break;
    case isProject:
      router.prefetch(`/dashboard/projects/${projectId}?isProject=${isProject}`);
      router.push(`/dashboard/projects/${projectId}?isProject=${isProject}`);
      break;
    default:
      router.prefetch(`/dashboard/projects/${projectId}?isDashboard=${isDashboard}`);
      router.push(`/dashboard/projects/${projectId}?isDashboard=${isDashboard}`);
      break;
  }
};

`

I did kinda liek that

Is it works right?

riský

2023-10-05T10:35:38.000Z

this is useless now...

Muhammed KhalOP

2023-10-05T10:35:45.000Z

Ah okay

It needs to be in useEffect

riský

2023-10-05T10:36:13.000Z

it can be anywhere, but just not before the .push as that is useless

Muhammed KhalOP

2023-10-05T10:36:24.000Z

Okay

@Muhammed Khal js useEffect(() => { if (isAgency === false) { router.push('/client-dashboard'); } }, [isAgency, router, session]); And at there I am not sure how can I use the Link!!

Clown

2023-10-05T10:36:29.000Z

bro are u seriously doing === false?

riský

2023-10-05T10:36:32.000Z

idk if you can do it on root of component, so i just said useEffect to be safe

@Clown bro are u seriously doing === false?

Muhammed KhalOP

2023-10-05T10:37:00.000Z

Because it's always getting as undfined bro at first as it's coming from the API

I tried !isAgency but doesn't seems working

Muhammed KhalOP

2023-10-05T11:08:09.000Z

useEffect(() => {
      switch (true) {
        case isClientPortal:
          router.prefetch(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.prefetch(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.prefetch(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.prefetch(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
      console.log('projectId in the use effect:', projectId);
    }, [
      isClientPortal,
      isClientWorkSpace,
      isDashboard,
      isProject,
      projectId,
      router,
    ]);

    const handleRoute = (projectId: string) => {
      switch (true) {
        case isClientPortal:
          router.push(`/client-dashboard/projects/${projectId}`);
          break;
        case isClientWorkSpace:
          router.push(
            `/dashboard/projects/${projectId}?isClientWorkSpace=${isClientWorkSpace}`
          );
          break;
        case isProject:
          router.push(
            `/dashboard/projects/${projectId}?isProject=${isProject}`
          );
          break;
        default:
          router.push(
            `/dashboard/projects/${projectId}?isDashboard=${isDashboard}`
          );
          break;
      }
    };

<Card
                className=' mr-3'
                onClick={() => {
                  handleRoute(project.id);
                  setProjectId(project.id);
                }}
              >

I did like that but seems not working

@riský

riský

2023-10-05T11:09:16.000Z

you have to get the list of all projectId combinations on the page... and then prefetch them...

or... you could just make a size 0 next/link element (idk if this would fully work tho)

Muhammed KhalOP

2023-10-05T11:10:17.000Z

The projectid's gonna be so many right sometimes more then 100 and thousand

If I do then it's gonna slow down the application

riský

2023-10-05T11:10:35.000Z

then don't have prefetch...

you could have prefetch on hover...

but idk

Muhammed KhalOP

2023-10-05T11:11:19.000Z

Hmm this seems might useful

@riský or... you could just make a size 0 next/link element (idk if this would fully work tho)

riský

2023-10-05T11:11:23.000Z

hmmm if this works... then you would have the benifit of next/link prefetching (only when visible) and still manualy work

Muhammed KhalOP

2023-10-05T11:11:30.000Z

onMouseOver then prefetch

@riský or... you could just make a size 0 next/link element (idk if this would fully work tho)

Muhammed KhalOP

2023-10-05T11:11:53.000Z

Any example for that?

riský

2023-10-05T11:12:02.000Z

you can do that (but if they do click very fast... then not real use)

Muhammed KhalOP

2023-10-05T11:12:25.000Z

Link is really faster compared to the router

There's some places I can't able to use

the Link

riský

2023-10-05T11:13:06.000Z

that is because it fetches whenever the link is in viewport... so not all at once

Muhammed KhalOP

2023-10-05T11:13:19.000Z

yeah

Did you used the prefetch in your application?

riský

2023-10-05T11:13:57.000Z

so, you either have to implment it youself of use next/link and remove the default styling that breaks things

Muhammed KhalOP

2023-10-05T11:15:16.000Z

and I have one question

router prefetch does show what I am going to fetch like

riský

2023-10-05T11:16:16.000Z

router prefetch does what .push does but not actually change page (ie just download the page)

Muhammed KhalOP

2023-10-05T11:16:27.000Z

Like that, at left bottom of the screen?

I mean if i use a link and i am able to see what my link is going it, if I implement the prefect can I able to see like that like in the above ss?

riský

2023-10-05T11:18:50.000Z

if you use the useRouter, you don't have that ui as it is not a link element...

anyway... i would suggest reading the docs, as i am getting nowhere here...

Muhammed KhalOP

2023-10-05T11:19:34.000Z

Okay gotit

Thanks

Muhammed KhalOP

2023-10-05T11:25:36.000Z

@riský could you please share me the exact doc link so I can go through that

Saint Bernard

2023-10-05T12:27:47.000Z

I find this to be very problematic and concerning as well. forces me to style links as buttons sometimes although i just want to stick to semantic structuring

Muhammed KhalOP

2023-10-05T15:05:45.000Z

How did you handled this situation @Saint Bernard ?

Did you used the prefetch of the router?

Saint Bernard

2023-10-05T15:11:44.000Z

I just use Links

@Saint Bernard I just use Links

riský

2023-10-07T04:11:14.000Z

thats what i feel like is the best.. just overide the styles so it doesn't break everything... and then it should work well

Muhammed KhalOP