Suspense fires late

Answered

Spinge Bib Sqorpnts posted this in #help-forum

Open in Discord

Spinge Bib SqorpntsOP

2023-09-26T12:43:12.000Z

Hello! I have a Next.js application that uses suspense to wait for page load, but instead, when switching URLs it first shows the webpage, then shows and quickly hides the suspense fallback.

I'm unsure if I have a flawed knowledge of Suspense in Next or is some other part of my code screwing things up.
next info:

Operating System:        
  Platform: win32        
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.3
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

package.json

"dependencies": {
  "@emotion/cache": "^11.11.0",
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.9",
  "@mui/material": "^5.14.10",
  "@mui/x-date-pickers": "^6.14.0",
  "@next/bundle-analyzer": "^13.5.2",
  "dayjs": "^1.11.10",
  "lodash": "^4.17.21",
  "next": "13.5.4-canary.0",
  "next-intl": "3.0.0-beta.18",
  "overlayscrollbars": "^2.3.1",
  "overlayscrollbars-react": "^0.5.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-signature-canvas": "^1.0.6",
  "stylis": "^4.3.0",
  "stylis-plugin-rtl": "^2.1.1",
  "sweetalert2": "^11.7.28",
  "sweetalert2-react-content": "^5.0.7"
},
"devDependencies": {
  "@trivago/prettier-plugin-sort-imports": "^4.2.0",
  "@types/lodash": "^4.14.198",
  "@types/node": "^20.6.3",
  "@types/react": "18.2.22",
  "@types/react-dom": "18.2.7",
  "@types/react-signature-canvas": "^1.0.2",
  "@types/stylis": "^4.2.0",
  "@typescript-eslint/eslint-plugin": "^6.7.2",
  "@typescript-eslint/parser": "^6.7.2",
  "autoprefixer": "10.4.16",
  "eslint": "^8.49.0",
  "eslint-config-next": "13.5.3",
  "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-prettier": "^5.0.0",
  "npm-check": "^6.0.1",
  "postcss": "^8.4.30",
  "prettier": "3.0.3",
  "sass": "^1.68.0",
  "tailwindcss": "3.3.3",
  "typescript": "5.2.2"
}

Answered by Spinge Bib Sqorpnts

@alfonsus ardani React.lazy() in some components further down the tree caused the double-trigger

View full answer

50 Replies

Spinge Bib SqorpntsOP

2023-09-26T12:43:50.000Z

I've already attempted using the Canary release, 13.5.4-canary.0, to no avail

alfonsus ardani

2023-09-26T12:45:36.000Z

ure saying theres a slight delay/fkick where the fallback doesn't get rendered during suspense?

@alfonsus ardani ure saying theres a slight delay/fkick where the fallback doesn't get rendered during suspense?

Spinge Bib SqorpntsOP

2023-09-26T12:47:09.000Z

When I go to a URL, it shows the 'full' webpage, flashes the fallback and then shows the webpage again

alfonsus ardani

2023-09-26T12:53:25.000Z

does it happen on prod

also is this <Suspense> or loading.tsx?

@alfonsus ardani also is this <Suspense> or loading.tsx?

Spinge Bib SqorpntsOP

2023-09-26T12:53:40.000Z

I tried both

@alfonsus ardani does it happen on prod

Spinge Bib SqorpntsOP

2023-09-26T12:53:56.000Z

It did, but i'll try again incase there was a one-off or just human error

alfonsus ardani

2023-09-26T12:54:05.000Z

okay

seems like a weird routing issue, can you try reproducing it in a new project? using the latest canary version

Spinge Bib SqorpntsOP

2023-09-26T12:55:39.000Z

Sure, I'll try that. I'll also record a short video in-case we're not on the same page on what's happening

@alfonsus ardani does it happen on prod

Spinge Bib SqorpntsOP

2023-09-26T12:57:08.000Z

Still happens, not as noticable though

@alfonsus ardani

(hid the top of the scren because of some sensitive info, but its just me typing in different urls)

alfonsus ardani

2023-09-26T13:00:29.000Z

you know you are already tagging me when you reply xD no need to tag again

@alfonsus ardani you know you are already tagging me when you reply xD no need to tag again

Spinge Bib SqorpntsOP

2023-09-26T13:00:43.000Z

oh sorry ðŸ˜…

Didn't mean to double ping

@alfonsus ardani seems like a weird routing issue, can you try reproducing it in a new project? using the latest canary version

Spinge Bib SqorpntsOP

2023-09-26T13:16:01.000Z

Now it doesn't show up, but I think that my code is flawed...
layout.tsx

const FetchData = async () => {
  const d = await fetch('https://restcountries.com/v3.1/all', { next: { revalidate: 0 } });
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(d.json());
    }, 3000);
  });
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const d = await FetchData();
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

alfonsus ardani

2023-09-26T13:16:41.000Z

uhhhh

it shouldnt show up if you havent made loading.tsx

@alfonsus ardani it shouldnt show up if you havent made loading.tsx

Spinge Bib SqorpntsOP

2023-09-26T13:22:32.000Z

It exists

It's a simple spinner there so I didn't think I'd have to add it here

alfonsus ardani

2023-09-26T13:24:48.000Z

i think the loading is only for child layout coponent

like the boundaries goes as follows

Layou -> Error -> Suspense -> Page

so if you make loading.tsx its only for child awaits like /page.tsx or /child/layout.tsx or /child/page.tsx

@alfonsus ardani i think the loading is only for child layout coponent

Spinge Bib SqorpntsOP

2023-09-26T13:30:32.000Z

That's right, but in the original project the layout is also on a child route

aka not the root layout

@Spinge Bib Sqorpnts Now it doesn't show up, but I think that my code is flawed... `layout.tsx` tsx const FetchData = async () => { const d = await fetch('https://restcountries.com/v3.1/all', { next: { revalidate: 0 } }); return new Promise((resolve, reject) => { setTimeout(() => { resolve(d.json()); }, 3000); }); }; export default async function RootLayout({ children }: { children: React.ReactNode }) { const d = await FetchData(); return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ); }

alfonsus ardani

2023-09-26T13:32:24.000Z

hmm can i see the file structure for this new project

@alfonsus ardani hmm can i see the file structure for this new project

Spinge Bib SqorpntsOP

2023-09-26T13:32:47.000Z

original project if relevant

@Spinge Bib Sqorpnts Now it doesn't show up, but I think that my code is flawed... `layout.tsx` tsx const FetchData = async () => { const d = await fetch('https://restcountries.com/v3.1/all', { next: { revalidate: 0 } }); return new Promise((resolve, reject) => { setTimeout(() => { resolve(d.json()); }, 3000); }); }; export default async function RootLayout({ children }: { children: React.ReactNode }) { const d = await FetchData(); return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ); }

alfonsus ardani

2023-09-26T13:36:07.000Z

i mean preferrably the await shouldn't be here but on the child layout/page instead

see if that worked

@alfonsus ardani i mean preferrably the `await` shouldn't be here but on the child layout/page instead

Spinge Bib SqorpntsOP

2023-09-26T13:36:33.000Z

it is, I moved it after you said I should try it on the child layout

@Spinge Bib Sqorpnts original project if relevant

Spinge Bib SqorpntsOP

2023-09-26T13:36:50.000Z

Here its the app/[mof]/forms/161/layout.tsx

@alfonsus ardani see if that worked

Spinge Bib SqorpntsOP

2023-09-26T13:45:43.000Z

also, in the OG project, after adding a timeout to the fetch request, something causes the loading.tsx to show up again and I have no idea what it is

is there any way to see what causes the loading.tsx to show up?

alfonsus ardani

2023-09-26T13:47:35.000Z

its the async/await of server components.

Spinge Bib SqorpntsOP

2023-09-26T13:47:36.000Z

I wonder if it's nested lazy() loaded components...

alfonsus ardani

2023-09-26T13:47:37.000Z

those causes the loading.tsx to show up

@alfonsus ardani those causes the loading.tsx to show up

Spinge Bib SqorpntsOP

2023-09-26T13:48:02.000Z

the first time is okay, but what causes it to show up for the second time

@Spinge Bib Sqorpnts the first time is okay, but what causes it to show up for the second time

alfonsus ardani

2023-09-26T13:48:42.000Z

can you reproduce this effect in a new project?

im not sure either why it would get triggered twice

Spinge Bib SqorpntsOP

2023-09-26T13:49:11.000Z

ill try removing all lazy references in the OG

Spinge Bib SqorpntsOP

2023-09-26T13:52:15.000Z

@alfonsus ardani React.lazy() in some components further down the tree caused the double-trigger

Answer

alfonsus ardani

2023-09-26T13:53:05.000Z

yeah

ive never used that

Spinge Bib SqorpntsOP

2023-09-26T13:53:15.000Z

That's fair

thank you for your help though :D

have a great day

@Spinge Bib Sqorpnts <@194128415954173952> `React.lazy()` in some components further down the tree caused the double-trigger

alfonsus ardani

2023-09-26T13:53:31.000Z

can you reproduce this? is this confirmed?

@alfonsus ardani can you reproduce this? is this confirmed?

Spinge Bib SqorpntsOP

2023-09-26T13:53:58.000Z

well, removing lazy() in the OG project fixed the issue

Spinge Bib SqorpntsOP

2023-09-26T14:09:23.000Z

I'd like to add that using next/dynamic works, unlike React.lazy