Next.js Discord

Discord Forum

Suspense doesnt work on build

Unanswered
gin posted this in #help-forum
Open in Discord
ginOP
Hey guys, i noticed that almost on all of my projects -> suspense feature from react stops working and the page waits for data to be fetched and displayed without using the fallback

87 Replies

ginOP
anyone has same experience?
<Suspense fallback={<>
                        <div style={{
                            width: '100%',
                            height: '15px',
                            backgroundColor: 'rgba(66,66,66,0.32)',
                            borderRadius: '99999999px',
                            position: 'relative',
                            zIndex: 100,
                        }}>
                            <div className={styles.avatarskeleton} style={{
                                position: 'absolute',
                                width: '100%',
                                height: '100%',
                                backgroundColor: 'rgb(196,127,72)',
                                borderRadius: '99999999px',
                                zIndex: 100,
                            }}>

                            </div>
                            <div style={{
                                fontSize: '25px',
                                color: 'rgb(255,255,255)',
                                position: 'absolute',
                                zIndex: 101,
                                right: 0,
                                top: -40
                            }}>
                                ???/3000
                            </div>

                        </div>
                    </>}>
                        <VoteGoalCard/>
                    </Suspense>
VoteGoalCard -> 
const response = await fetch("https://blablabla", {
        cache: "no-cache",
    });
    const data = await response.json();
    const count = data.vote_count;
fallback works on local devserver
but the moment i push it into production it just stops
appreciatus helpus
helpus
ginOP
i cannot use suspense if i end up waiting for all fetches to finish before the page renders
ginOP
help
can i see your build log?
@ᴉuɐpɹɐɐ can i see your build log?
ginOP
build log for production?
ᴉuɐpɹɐɐ
Suspense doesnt work on build
so i assume you have done npm run build
ginOP
i cannot give u that since i dont have access to it unfortunately
ᴉuɐpɹɐɐ
you can run npm run build locally
oh
yes hold on
this is btw the site if u want to replicate the issue https://www.twerion.net/
if u go on the landingpage
and then switch to "voten" or "vote"
it will only load after server has fetched the data
no suspense
where can i find the log? @ᴉuɐpɹɐɐ
ᴉuɐpɹɐɐ
when you run npm run build
it will print a bunch of stuff
ginOP
  ▲ Next.js 14.2.2

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (6/6)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ƒ /                                    5.58 kB         107 kB
├ ƒ /_not-found                          293 B          87.4 kB
├ ƒ /play                                2.33 kB         102 kB
└ ƒ /vote                                1.94 kB        94.1 kB
+ First Load JS shared by all            94.4 kB
  ├ chunks/23-ab4c80193b414b75.js        31.4 kB
  ├ chunks/fd9d1056-bef1823da86e40ac.js  53.7 kB
  └ other shared chunks (total)          9.27 kB


ƒ Middleware                             30.7 kB

ƒ  (Dynamic)  server-rendered on demand
ᴉuɐpɹɐɐ
oh nice
@gin but the moment i push it into production it just stops
ᴉuɐpɹɐɐ
what do you mean by "it just stops"?
hold on let me send u a video
ᴉuɐpɹɐɐ
okok
ginOP
ah wait
ill upload it to streamable
https://streamable.com/kp10dy
https://streamable.com/w3fo7m
First one is dev and second one is the production
hope u see what i mean
@ᴉuɐpɹɐɐ
ᴉuɐpɹɐɐ
kk let me check
@gin https://streamable.com/w3fo7m
ᴉuɐpɹɐɐ
that looked like its Suspensed correctly for me lol
its just too fast for you to see
@ᴉuɐpɹɐɐ its just too fast for you to see
ginOP
no i see it but its not like a waterfall like on the dev
it loads longer and then instantly flashes it for half of a second
ᴉuɐpɹɐɐ
ginOP
and
ᴉuɐpɹɐɐ
somethings wrong with the fetch() not the suspense
suspense works perfectly
somethings wrong with the <VoteGoalCard/>
ginOP
its not that long i can give u the full code
"use server";
import {inter} from "@/font";

let styles = {};
import homestyles from "@/components/Home/Home.module.scss";
import votestyles from "./Vote.module.scss";
import playsyles from "@/components/Play/PlayCard.module.scss";
import Image from "next/image";

Object.assign(styles, homestyles, votestyles, playsyles);

export default async function VoteGoalCard() {

    const response = await fetch("https://api.twerion.net/votes/count", {
        cache: "no-cache",
    });
    const data = await response.json();
    const count = data.vote_count;


    return (
        <>

                <div style={{
                    width: '100%',
                    height: '15px',
                    backgroundColor: 'rgba(66,66,66,0.32)',
                    borderRadius: '99999999px',
                    position: 'relative',
                    zIndex: 100,
                }}>
                    <div style={{
                        position: 'absolute',
                        width: `${count / 3000 * 100}%`,
                        height: '100%',
                        backgroundColor: 'rgb(196,127,72)',
                        borderRadius: '99999999px',
                        zIndex: 100,
                    }}>

                    </div>
                    <div style={{
                        fontSize: '25px',
                        color: 'rgb(255,255,255)',
                        position: 'absolute',
                        zIndex: 101,
                        right: 0,
                        top: -40
                    }}>
                        {count}/3000
                    </div>

                </div>
        </>
    )
}
nothing much
yes i like inline styles xD
ᴉuɐpɹɐɐ
idc lol
try removing this
ginOP
then i have to remove the async aswell?
ᴉuɐpɹɐɐ
no
async/await is correct
ginOP
ah i see
i remember something
in the past telling me to use use server
for async components
but works
ᴉuɐpɹɐɐ
thats weird
coz "use server" is not for making async components at all
nothing to do with them
ginOP
what
XD
ᴉuɐpɹɐɐ
yep
ginOP
i can use await without use server?
wth
ᴉuɐpɹɐɐ
you can use await. "use server" is for something else
your component needs to be async and it needs to be imported from a server component
if it doesnt work, install node-fetch and import fetch2 from "node-fetch" and replace your fetch to fetch2 (fetch2 is just a name, use anything you want but not "fetch") and try again
yes
since
components are server by default right
ᴉuɐpɹɐɐ
yes
i will push that into the repo
they will update that and i will respond here
if its fixed
hope it is
its important
ᴉuɐpɹɐɐ
ok good luck