Uh oh!
There was an error while loading. Please reload this page.
fix(hackathons): wrap HackathonProjectsList in Suspense to unblock prerender - #7
Merged
Merged
Conversation
…erender
On prod (Vercel), the `/hackathons/[id]` page is served with the entire
HackathonProjectsList section truncated from the RSC stream: the parent
row references $L32, but row 32's data is never sent. The page ends at
the "Participación" rules card and the projects list (with the project
links users want to click) simply doesn't render.
Local dev SSR includes the section fine (~102KB vs 55KB on prod).
The truncation is specific to the prerender path that combines a
`"use cache"` directive on the page with a complex client component
(useEffect + useMemo + useHackathonResults + lots of imports) as the
last child. Earlier client components on the page render fine
(HackathonInscripcionButton, HackathonResultsClient) — only the tail
gets dropped.
Wrapping `<HackathonProjectsList>` in `<Suspense fallback={null}>`
marks the slot as a deferred streaming boundary so the cached prerender
stops trying to resolve it inline. The fallback is null (the component
already renders its own loading skeleton when nostrSubmissions === []),
and client hydration takes over normally.
Verified locally: SSR HTML still contains "PROYECTOS INSCRIPTOS" /
"Rescanear Nostr" / "Inscribite gratis" after the change, and the
client component mounts correctly. The Vercel-side fix needs a preview
deploy to confirm row 32 actually arrives in the prod RSC stream now.The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR adds React ChangesSuspense boundary for projects streaming
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/hackathons/[id]/page.tsx (1)
542-543: ⚡ Quick winClarify the comment about the fallback.
The comment states "The fallback renders the SSR skeleton" but
fallback={null}renders nothing at the Suspense boundary. Based on the PR description, the component itself handles its own loading state. Consider revising for clarity:- * comes back missing the entire projects section. The fallback renders- * the SSR skeleton; client takes over on hydration.+ * comes back missing the entire projects section. The null fallback+ * allows the component to render its own skeleton during client hydration.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/hackathons/`[id]/page.tsx around lines 542 - 543, Update the inline comment to accurately describe behavior at the Suspense boundary: state that fallback={null} causes the Suspense to render nothing during fallback, and clarify that the component (the child inside Suspense) is responsible for rendering its own loading/SSR skeleton on hydration rather than the Suspense boundary doing it; reference the Suspense usage and the fallback={null} prop so reviewers can locate and revise the comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/hackathons/`[id]/page.tsx:
- Around line 542-543: Update the inline comment to accurately describe behavior
at the Suspense boundary: state that fallback={null} causes the Suspense to
render nothing during fallback, and clarify that the component (the child inside
Suspense) is responsible for rendering its own loading/SSR skeleton on hydration
rather than the Suspense boundary doing it; reference the Suspense usage and the
fallback={null} prop so reviewers can locate and revise the comment.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On prod (https://lacrypta.dev/hackathons/commerce and every other hackathon page), the entire
<HackathonProjectsList>section is missing from the rendered HTML. Users see the hero, calendar, sponsors, rules — and then nothing where the project list and links should be. On/hackathons/commercethis is especially visible: the page is Nostr-only (no curatedprojects-commerce.json), so the missing list means zero project links to click.Diagnosis
Confirmed by comparing local SSR vs prod:
In the prod RSC stream, the page's main row references
$L32where the projects-list output should be, but row 32's data is never sent. The stream truncates right after the Participación rules card and jumps straight to metadata. Same shape on/hackathons/foundations.Why specifically this slot:
app/hackathons/[id]/page.tsxis wrapped in"use cache"(line 284).HackathonInscripcionButton(in hero),HackathonResultsClient(in awards card), andHackathonProjectsList(last child).useState,useRef,useMemo×3,useHackathonResults,useEffect) and the most transitive imports — gets dropped.With Next 16
cacheComponents: true, prerendering a complex client component as a direct child of a"use cache"server function hits a streaming truncation: the prerender abandons the slot mid-stream and the rest of the body never arrives.Fix
Wrap
<HackathonProjectsList>in<Suspense fallback={null}>. This marks the slot as an explicit deferred streaming boundary, so the cached prerender stops trying to resolve it inline. Fallback isnull(the component renders its own skeleton whennostrSubmissions === []). Client hydration takes over normally.12-line diff to a single file, no behavioral change elsewhere.
Test plan
<preview>/hackathons/commerceshows the project list with 6 Nostr submissions and clickable links.curl -s <preview>/hackathons/commerce | wc -c≈ 100KB+, not ~55KB.curl -s <preview>/hackathons/commerce | grep -c 'Rescanear Nostr'≥ 1./hackathons/foundations(had the same truncation, just less visible because curated projects masked it)./hackathons/commercelands on/hackathons/commerce/<id>with the project page content.Fallback if preview still truncates
If for some reason the Suspense wrap alone isn't sufficient on Vercel, the surgical follow-up is to move
<HackathonProjectsList>out of the"use cache"boundary entirely — split the page into a cached sub-component (hero + cards) and a non-cached parent that renders both the cached part and the projects list. That keeps the cards prerendered statically while letting the dynamic list render uncached. Easy to apply as a second commit if needed.🤖 Generated with Claude Code
Summary by CodeRabbit