#Showing loading message while server fetches component data.

1 messages · Page 1 of 1 (latest)

split tendon
#

I have a server component called Results that fetches some data, which it then displays. This component is then wrapped in a Suspense component which has a fallback component <Loading />.

As far as I understand, the way this should work is that everything outside the Suspense boundary (which is static) should render along with the Loading component, up until the Loading component is replaced with the Result component when the data is fetched and is ready to render.

However, in my case, that does not happen, and the whole page just loads until the data is fetched and the whole page is ready at once. What could be the issue?

static treeBOT
#

Hi @split tendon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, there could be a few reasons why your page is not rendering as expected with the Suspense component.

  1. Server Component Issue: There could be an issue with how your server component is fetching and returning data. Ensure that your server component is correctly fetching data and returning it. Here's an example of a server component fetching data:
async function getData() {
    const res = await fetch('<https://catfact.ninja/fact'>);
    return res.json();
}

export default async function Fact() {
    const name = use(getData());

    return (
        <div>
            {name.fact}
        </div>
    );
}

(Source: Github Issue (https://github.com/vercel/next.js/issues/42180))

  1. Suspense Usage: Ensure that you're using the Suspense component correctly. The Suspense component should wrap around the component that fetches data, and the fallback prop should contain the loading UI. Here's an example:
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
 return (
 <section>
 <Suspense fallback={<p>Loading feed...</p>}>
 <PostFeed />
 </Suspense>
 <Suspense fallback={<p>Loading weather...</p>}>
 <Weather />
 </Suspense>
 </section>
 )
}

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example))

  1. Next.js Version: Ensure that you're using a version of Next.js that supports Suspense. As per the Vercel Docs (https://vercel.com/docs/frameworks/nextjs), Suspense was introduced in React 18 and is supported in Next.js 13.

  2. Client-Side Rendering: If you're using client-side rendering, ensure that you're fetching data correctly. Here's an example of using useEffect() to fetch data:

# 
import React, { useState, useEffect } from 'react'
 
export function Page() {
 const [data, setData] = useState(null)
 
 useEffect(() => {
 const fetchData = async () => {
 const response = await fetch('<https://api.example.com/data'>)
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`)
 }
 const result = await response.json()
 setData(result)
 }
 
 fetchData().catch((e) => {
 console.error('An error occurred while fetching the data: ', e)
 })
 }, [])
 
 return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering))

If you're still facing issues, it would be helpful to check the console for any errors or warnings. You could also consider posting a detailed issue on the Next.js Github (https://github.com/vercel/next.js/issues) for more specific help.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@split tendon kapa.ai is still learning and improving, please let us know how it did by reacting below

split tendon
#

@static tree Does the coponent within the Suspense block have to be async?

static treeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, the component within the Suspense block typically performs an asynchronous action, such as fetching data. The Suspense component in React allows you to "wait" for some code to load and declaratively specify a loading state (like a loading message or a spinner) while we’re waiting.

Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example):

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
 return (
 <section>
 <Suspense fallback={<p>Loading feed...</p>}>
 <PostFeed />
 </Suspense>
 <Suspense fallback={<p>Loading weather...</p>}>
 <Weather />
 </Suspense>
 </section>
 )
}

In this example, PostFeed and Weather are components that are expected to perform some asynchronous action (like fetching data). The fallback prop is what's shown until the asynchronous action is complete.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: