Next.js Discord

Discord Forum

Server component rendering behavior

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I need help on displaying loading status on server component.

So let's say I have page.tsx and the url for this page is example.com/ab.
If I add or change the searchParams, like example.com/ab?q=1, then I can see one api call to the server and its response is the difference.

What do we call this behavior in Next.js term?
and how to display loading status next to specific element of the page?

Anyone help me. 🙏

12 Replies

jason
Have you tried wrapping your server component with <Suspense> ?

Using that, you are also able to pass in a fallback component, while your server component is loading:

<Suspense fallback={<p>Loading feed...</p>}>
  <PostFeed />
</Suspense>


Example taken from: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example
Asiatic LionOP
My page.tsx file looks like the below.
export default async function Page({
  searchParams,
}: {
  searchParams: { [key: string]: string };
}) {
  const q = searchParams["q"] || "";

  const data = await getDataByQuery({
    q,
  });

  return (
    <div className="p-4">
      <div className="mt-4">
        <h2>Total: {data.length} </h2>
        <div className="mt-4">
          <h2 className="mb-2 font-bold"> Data </h2>
          <ul className="list-disc pl-6">
            {data.map((data) => (
              <p key={data.id}>{data.name}</p>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
I need to show loading status next to Data
jason
You move your data fetching method into a server component like this:

export default async function ServerComponent({ q }: { q: string}) {
  const data = await getDataByQuery({
    q,
  });

  return (
    <ul className="list-disc pl-6">
      {data.map((data) => (
        <p key={data.id}>{data.name}</p>
      ))}
    </ul>
  )
}


// ...

<div className="mt-4">
    <h2 className="mb-2 font-bold"> Data </h2>
    <Suspense fallback={<>Loading...</>}
        <ServerComponent q={q} />
    </Suspense>
</div>

// ...
Asiatic LionOP
Thanks. that's what I'm thinkg now. But I want to display Loading text inside the h2(Data). is it possible?
jason
You could style this and move things around as needed.

If you wanted to you can move the h2 inside the server component and for the suspense fallback use
<h2 className="mb-2 font-bold">Data loading...</h2>
Red ant
If you use request tools such as axios you can use config.loading to display loading ui.
I hope this can help you.
jason
So your server component would look like this:
export default async function ServerComponent({ q }: { q: string}) {
  const data = await getDataByQuery({
    q,
  });

  return (
    <div className="mt-4">
      <h2>Total: {data.length} </h2>
      <div className="mt-4">
        <h2 className="mb-2 font-bold"> Data </h2>
        <ul className="list-disc pl-6">
          {data.map((data) => (
            <p key={data.id}>{data.name}</p>
          ))}
        </ul>
      </div>
    </div>
  )
}


and then on your page you should have something like this:
export default async function Page({
  searchParams,
}: {
  searchParams: { [key: string]: string };
}) {
  const q = searchParams["q"] || "";

  return (
    <div className="p-4">
      <Suspense fallback={<h2 className="mb-2 font-bold"> Data loading... </h2>}>
        <ServerComponent q={q} />
      </Suspense>
    </div>
  );
}


You can move things around as needed.
Asiatic LionOP
Do I have to create a new component?
Isn't there OTHER way?
😢
jason
I believe this would be the best way to achieve what you're going for.