Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
📝 WalkthroughWalkthroughAdded a published MDX blog post titled “RSC in 2026: A Practical Guide.” It covers RSC concepts, principles, pitfalls, best practices, TypeScript examples, and community guidance. ChangesRSC Practical Guide
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdxParsing error: Invalid left-hand side in prefix operation. (1:2) 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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.
Inline comments:
In `@content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx`:
- Line 7: Add the missing post-image.png asset at the path referenced by the
frontmatter image field, content/blog-post-2026-08-02/images/post-image.png, so
the cover image resolves correctly.
- Around line 20-34: Replace the useModernPattern example and the related
example at lines 53-71 with an explicit RSC boundary: show a Server Component
that prepares or fetches data, plus a separate 'use client' component that owns
the interactive button. Remove event handlers from Server Components; if a
callback must cross the boundary, use a Server Function or place the callback in
a Client Component parent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 257a7352-c980-4cec-a8d8-e3a88399eb02
📒 Files selected for processing (1)
content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx
| date: '2026-08-02' | ||
| tags: ['RSC', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
asset='content/blog-post-2026-08-02/images/post-image.png'
test -f "$asset"
file "$asset"Repository: deepu0/frontend-junction
Length of output: 162
🏁 Script executed:
#!/bin/bash
set -u
asset='content/blog-post-2026-08-02/images/post-image.png'
file='content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx'
echo "asset_existence=$([[ -f "$asset" ]] && echo true || echo false)"
echo "post_file_existence=$([[ -f "$file" ]] && echo true || echo false)"
[[ -f "$file" ]] && {
echo "frontmatter:"
sed -n '1,40p' "$file"
echo "image reference in post:"
rg -n "post-image|image:|src=\." "$file" || true
}
if [[ -d content ]]; then
echo "images under parent:"
find content/blog-post-2026-08-02 -type d -o -type f | sort | sed -n '1,120p'
fiRepository: deepu0/frontend-junction
Length of output: 1766
Add the referenced cover-image asset before publishing.
The post frontmatter references ./images/post-image.png, but content/blog-post-2026-08-02/images/post-image.png is missing, so the cover-image path cannot resolve.
🤖 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 `@content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx` at line 7,
Add the missing post-image.png asset at the path referenced by the frontmatter
image field, content/blog-post-2026-08-02/images/post-image.png, so the cover
image resolves correctly.
| ### 1. Foundation Principles | ||
|
|
||
| The core principles behind rsc remain consistent, but implementation details have evolved. Here's what you need to know: | ||
|
|
||
| ```typescript | ||
| // Example of modern rsc pattern | ||
| function useModernPattern() { | ||
| // Implementation example | ||
| return { | ||
| apply: () => { | ||
| console.log("Applying modern rsc pattern"); | ||
| } | ||
| }; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx"
if [ ! -f "$file" ]; then
echo "File not found: $file"
fd -a 'rsc-in-2026-a-practical-guide\.mdx$' . || true
exit 0
fi
echo "== file statistics =="
wc -l "$file"
echo "== relevant sections =="
sed -n '1,90p' "$file" | nl -ba
echo "== React/use client/event handler mentions =="
rg -n "useClient|'use client'|onClick|onUpdate|Server Functions|Server Components|fetch|data" "$file" || trueRepository: deepu0/frontend-junction
Length of output: 315
🌐 Web query:
React Server Components cannot use event handlers add use client Server Functions reference
💡 Result:
React Server Components (RSC) cannot directly use event handlers (such as onClick, onChange, etc.) or interactive hooks (like useState or useEffect) because they execute exclusively on the server and do not have access to the browser environment where these interactive features operate [1][2][3][4]. To add interactivity to a React application, you must use the "use client" directive to define a Client Component [1][3][5]. Key distinctions and mechanisms: 1. The "use client" Directive: This directive acts as a boundary in the module graph [6][5]. When placed at the top of a file, it signals to the bundler that the component and its transitive dependencies should be included in the client-side JavaScript bundle, enabling support for event handlers, hooks, and browser APIs [6][5][7]. 2. Event Handlers as Props: A common error occurs when developers attempt to pass functions (including event handlers) from a Server Component to a Client Component as props [8][9]. Because functions are not serializable, they cannot be passed across the server-to-client boundary in this manner [9]. Instead, event handlers must be defined within the Client Component itself [9]. 3. Server Functions ("use server"): While event handlers cannot pass from server to client, React provides Server Functions (often called Server Actions) to facilitate communication from the client back to the server [10][11][12]. You can define a function with the "use server" directive in a server-side file and pass a reference to that function to a Client Component [10][11]. When triggered by an interaction (like a button click) in the Client Component, the function executes on the server [11][12][7]. In summary, Server Components are for rendering and data fetching on the server; interactivity is reserved for Client Components, which can call Server Functions to perform server-side logic [2][11][7].
Citations:
- 1: https://react.dev/reference/rsc/server-components
- 2: https://www.n-school.com/limitations-and-challenges-of-using-react-server/
- 3: https://blog.logrocket.com/react-server-components-comprehensive-guide/
- 4: https://www.joshwcomeau.com/react/server-components/
- 5: https://nextjs.org/docs/app/getting-started/server-and-client-components
- 6: https://react.dev/reference/rsc/use-client
- 7: https://snipshift.dev/blog/nextjs-use-server-vs-use-client
- 8: [Bug]: Example in "Adding Interactivity" works with vite but not with nextjs reactjs/react.dev#8083
- 9: https://fixdevs.com/blog/react-server-components-error/
- 10: https://react.dev/reference/rsc/use-server
- 11: https://react.dev/reference/rsc/server-functions
- 12: https://overreacted.io/what-does-use-client-do/
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx"
echo "== file content with line numbers =="
python3 - <<'PY'
from pathlib import Path
p = Path("content/blog-post-2026-08-02/coderabbit-shell-logs/rsc-in-2026-a-practical-guide.mdx" if False else "content/blog-post-2026-08-02/coderabbit-shell-logs/missing")
PY
python3 - <<'PY'
from pathlib import Path
p = Path("content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx")
lines = p.read_text().splitlines()
for i, line in enumerate(lines, 1):
print(f"{i:3}: {line}")
PY
echo "== React/use client/event handler mentions =="
python3 - <<'PY'
from pathlib import Path
import re
p = Path("content/blog-post-2026-08-02/coderabbit-shell-logs/rsc-in-2026-a-practical-guide.mdx" if False else "content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx")
terms = ["use client", "useServerFunctions", "Server Functions", "onClick", "onUpdate", "Server Component", "Client Component"]
for i, line in enumerate(p.read_text().splitlines(), 1):
if any(term in line for term in terms):
print(f"{i}: {line}")
PYRepository: deepu0/frontend-junction
Length of output: 3303
Replace the examples with an explicit RSC boundary.
useModernPattern does not show a Server Component, and Component uses onClick. Server Components cannot register event handlers. Show a Server Component that prepares or fetches data and a separate 'use client' component that owns the interactive button. If callbacks cross the boundary, use a Server Function or move the callback into a Client Component parent.
Also applies to lines 53-71.
🤖 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 `@content/blog-post-2026-08-02/rsc-in-2026-a-practical-guide.mdx` around lines
20 - 34, Replace the useModernPattern example and the related example at lines
53-71 with an explicit RSC boundary: show a Server Component that prepares or
fetches data, plus a separate 'use client' component that owns the interactive
button. Remove event handlers from Server Components; if a callback must cross
the boundary, use a Server Function or place the callback in a Client Component
parent.
This branch was successfully deployed
1 participant
Blog post about RSC for Frontend Junction
Summary by CodeRabbit