Is there a way to have 'redirect' ALWAYS hard-load a page?

[ripe current]

I have an app where there is always a SearchBar present in the AppBar of the Root Layout.

Whenever someone fills out the form associated with the SearchBar, it triggers a Server Action that parses the form into Search Params (Query Params) and then calls redirect('/search?<formatted-and-encoded-search-params>).

This works great! On every other page...

However, when trying to submit a search from the /search page itself, I don't see my loading.tsx file getting triggered and I don't see any indication that a search is being performed until poof the data is changed immediately on the Search Results page.

I've tried adding a template.tsx file to the route, a <Suspense> tag around the Results Table, nothing seems to trigger an indication to the user that data is being fetched on the backend.

Is there a way to enforce that every time I call redirect , even if I'm already at that path, that I hard-load the page?

[balmy plank]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[soft ibex]

Suspense only renders the loading screen for the first "suspension" (sort of like the stale-while-revalidate approach of data fetching).

you can add a key to the Suspense to force the loading screen:

import { Suspense } from "react";
import { Search } from "./search";

async function Data({ query }: { query?: string }) {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  if (!query) return <div>You didn't search for a query</div>;
  return <div>You searched for {query}</div>;
}

export default function Page({
  searchParams,
}: {
  searchParams: Record<string, string | string[] | undefined>;
}) {
  const query = Array.isArray(searchParams.query)
    ? searchParams.query[0]
    : searchParams.query;
  return (
    <>
      <Search />
      <Suspense fallback={<div>Loading...</div>} key={query}>
        <Data query={query} />
      </Suspense>
    </>
  );
}

[ripe current]

I'll give this a shot @soft ibex

[ripe current]

@soft ibex that worked like a charm! Cheers!

I ended up making a template.tsx file that basically looks like this:

'use client'

import { useSearchParams } from 'next/navigation'
import { ReactNode, Suspense } from 'react'

import Loading from './loading'

export default function Template({ children }: { children: ReactNode }) {
  const searchParams = useSearchParams()

  return (
    <Suspense fallback={<Loading />} key={searchParams.toString()}>
      {children}
    </Suspense>
  )
}

and I put that at the same level as my page.tsx which is doing the data fetching, and it works like a charm!

really appreciate the help!

[balmy plank]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1255626619247136919 message)