Add blog post: rsc-in-2026-a-practical-guide.mdx#149
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
CodeAnt AI is reviewing your PR. |
📝 WalkthroughWalkthroughA new MDX blog post is added with publication metadata, explanatory RSC sections, a TypeScript/JSX example, a conclusion, and a closing discussion prompt. ChangesRSC blog post
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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-06-27/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 |
codeant-ai
Bot
added
the
size:M
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| --- | ||
| title: 'RSC in 2026: A Practical Guide' | ||
| description: 'A comprehensive guide to rsc for modern frontend development in 2026.' | ||
| date: '2026-06-27' | ||
| tags: ['RSC', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' | ||
| --- |
There was a problem hiding this comment.
Suggestion: This post is placed in a directory that is not included by the content pipeline (velite.config.ts only indexes blog/**/*.mdx), so it will never be generated into posts, won't appear on the blog listing, and won't get a static blog route. Move this file under content/blog/ (or update the collection pattern to include this folder) so the new article is actually published. [incomplete implementation]
Severity Level: Major ⚠️
⚠️ Blog index omits newly written RSC article.
⚠️ Post detail route never generated for RSC article.
⚠️ Homepage latest posts never show this new entry.
⚠️ Sitemap lacks URL for new article.
⚠️ Tags pages ignore tags from this article.Steps of Reproduction ✅
1. Open `/workspace/frontend-junction/velite.config.ts` and observe the posts collection
definition at lines 11-14: `pattern: 'blog/**/*.mdx'` with `root: 'content'` at line 31,
meaning Velite only indexes files under `content/blog/` matching `**/*.mdx`.
2. Note the new article path from the PR diff:
`content/blog-post-2026-06-27/rsc-in-2026-a-practical-guide.mdx`, which lives under
`content/blog-post-2026-06-27/` and therefore does not match the `blog/**/*.mdx` pattern
configured in `velite.config.ts`.
3. Run the content build as configured in CI (`.github/workflows/pr-checks.yml:6-7` runs
`npx velite build`) or start the Next.js app, which triggers `VeliteWebpackPlugin` in
`next.config.mjs:16-31` to call `build(this.options)`; Velite generates `#site/content`
data only from `content/blog/**/*.mdx`, so the new article is absent from the exported
`posts`.
4. Access any consumer of `posts` from `#site/content` such as the blog index
(`app/blog/page.tsx:1-4, 26-35`), blog post route (`app/blog/[...slug]/page.tsx:1-3,
71-73`), homepage latest posts (`app/page.tsx:4, 72-85`), tags pages
(`app/tags/page.tsx:3, 15-18` and `app/tags/[tag]/page.tsx:1-5, 25-28`), or sitemap
(`app/sitemap.ts:3, 38-45`) and observe that the new article never appears in listings,
never gets a static route, and is missing from tags and sitemap data because it was never
indexed into `posts`.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** content/blog-post-2026-06-27/rsc-in-2026-a-practical-guide.mdx
**Line:** 1:8
**Comment:**
*Incomplete Implementation: This post is placed in a directory that is not included by the content pipeline (`velite.config.ts` only indexes `blog/**/*.mdx`), so it will never be generated into `posts`, won't appear on the blog listing, and won't get a static blog route. Move this file under `content/blog/` (or update the collection pattern to include this folder) so the new article is actually published.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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-06-27/rsc-in-2026-a-practical-guide.mdx`:
- Around line 2-3: Expand the acronym in the blog frontmatter and make the scope
explicit for new readers by updating the title/description in the MDX metadata
and the opening section of the post; use the existing blog post identifiers like
the frontmatter fields and the intro copy to clarify that “RSC” means React
Server Components and that the guide is aimed at the React/Next.js ecosystem.
- Around line 24-34: The example currently uses the plain helper
useModernPattern(), which does not demonstrate an actual RSC boundary. Replace
this snippet with a real Server Component example that shows server-side data
fetching or async access, and include a Client Component handoff where
appropriate so the guide reflects a practical React Server Components pattern.
- Around line 53-71: The example in Component is interactive because it uses
onClick, so it should not be presented as a pure server component. Mark this
snippet as a client component with a "use client" boundary, or split the button
list into a separate client-only component while keeping the non-interactive
parent as the RSC example. Use the Component and Props symbols to update the
example so it accurately reflects the client/server boundary.
🪄 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
Run ID: b73032d3-3918-4187-9367-b691666cf998
📒 Files selected for processing (1)
content/blog-post-2026-06-27/rsc-in-2026-a-practical-guide.mdx
| title: 'RSC in 2026: A Practical Guide' | ||
| description: 'A comprehensive guide to rsc for modern frontend development in 2026.' |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Spell out “RSC” and scope the guide upfront.
The post never expands the acronym or states which ecosystem this guide targets (for example, React Server Components in React/Next.js). That makes the title/description less clear for new readers and weakens searchability.
Also applies to: 10-16
🤖 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-06-27/rsc-in-2026-a-practical-guide.mdx` around lines
2 - 3, Expand the acronym in the blog frontmatter and make the scope explicit
for new readers by updating the title/description in the MDX metadata and the
opening section of the post; use the existing blog post identifiers like the
frontmatter fields and the intro copy to clarify that “RSC” means React Server
Components and that the guide is aimed at the React/Next.js ecosystem.
| ```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
🌐 Web query:
In React Server Components, what makes an example a true Server Component, and what patterns do React/Next.js docs recommend showing in introductory examples?
💡 Result:
A component is considered a true Server Component when it is executed exclusively on the server, allowing it to perform tasks such as direct database queries, accessing sensitive secrets, and reducing the client-side JavaScript bundle size [1][2][3]. In modern frameworks like Next.js (App Router), components are Server Components by default [2][4][5]. They are distinguished from Client Components by the absence of the 'use client' directive and their inability to use client-side features like state (useState), lifecycle effects (useEffect), or browser-exclusive APIs (e.g., window, localStorage) [1][6][4]. The official React and Next.js documentation emphasizes several core patterns for introductory examples to help developers effectively leverage this architecture: 1. Server Components by Default: Beginners are taught that most of their components should remain as Server Components [4][7]. They are encouraged to only introduce the 'use client' boundary at the lowest possible level—specifically where interactivity is required—to keep as much code on the server as possible [4][7]. 2. Co-located Data Fetching: Instead of fetching data in a top-level parent and prop-drilling it down, Server Components allow for direct, co-located data fetching [8][9]. Developers are encouraged to fetch the data they need within the specific component that requires it, which simplifies component structure and prevents unnecessary data passing [8][9]. 3. Interleaving with Client Components: Documentation demonstrates how to mix Server and Client Components [2][4]. A common introductory pattern is to use a Server Component to fetch data or render static content, and then pass that server-rendered content as a 'children' prop to a Client Component [4][7][9]. This allows developers to nest interactive client-side widgets (like a Like Button or Modal) within a page managed by Server Components without converting the entire tree to client-side code [4][5]. 4. Async Rendering: Introductory examples highlight the use of async/await directly within components [1]. Because Server Components can be asynchronous, they can pause rendering while waiting for data (e.g., database queries) to resolve, integrating seamlessly with React's Suspense for streaming UI [1][8]. By following these patterns, developers avoid common mistakes like "client-side bloating," where a whole application tree is unnecessarily marked as client-side, and instead benefit from optimized bundle sizes and improved application performance [4][7].
Citations:
- 1: https://react.dev/reference/rsc/server-components
- 2: https://vercel.com/blog/understanding-react-server-components?nxtPslug=understanding-react-server-components
- 3: https://www.joshwcomeau.com/react/server-components/
- 4: https://nextjs.org/docs/app/getting-started/server-and-client-components
- 5: https://nextjs.org/learn/react-foundations/server-and-client-components
- 6: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md
- 7: https://vercel.com/academy/nextjs-foundations/client-server-boundaries
- 8: https://viprasol.com/blog/nextjs-server-components-patterns/
- 9: https://tigerabrodi.blog/server-and-client-component-patterns-in-nextjs
🏁 Script executed:
sed -n '1,220p' content/blog-post-2026-06-27/rsc-in-2026-a-practical-guide.mdxRepository: deepu0/frontend-junction
Length of output: 2659
Replace this with a real Server Component example.
useModernPattern() is just a plain helper and doesn’t show an RSC boundary, async server data access, or a Client Component handoff. In a practical RSC guide, this should demonstrate an actual Server Component pattern instead.
🤖 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-06-27/rsc-in-2026-a-practical-guide.mdx` around lines
24 - 34, The example currently uses the plain helper useModernPattern(), which
does not demonstrate an actual RSC boundary. Replace this snippet with a real
Server Component example that shows server-side data fetching or async access,
and include a Client Component handoff where appropriate so the guide reflects a
practical React Server Components pattern.
| ```typescript | ||
| // Real-world application example | ||
| interface Props { | ||
| data: string[]; | ||
| onUpdate: (value: string) => void; | ||
| } | ||
|
|
||
| function Component({ data, onUpdate }: Props) { | ||
| return ( | ||
| <div> | ||
| {data.map(item => ( | ||
| <button key={item} onClick={() => onUpdate(item)}> | ||
| {item} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
In React Server Components and Next.js App Router, are event handlers like onClick allowed in Server Components, and what is the recommended way to document server/client composition?
💡 Result:
In React Server Components and the Next.js App Router, traditional event handlers like onClick are not allowed directly in Server Components because Server Components do not execute in the browser and cannot interact with DOM-based events [1][2][3]. However, there are two primary ways to manage interactivity: 1. Use Client Components: For standard interactivity (e.g., toggling state with useState or adding onClick listeners to UI elements), you must use a Client Component [1][4][5]. These components are marked with the "use client" directive, which signals to React that the file and its imports should be included in the client-side JavaScript bundle [6][7]. 2. Use Server Actions: If you need to trigger server-side logic from an event handler, you can use Server Actions (defined with "use server") [8][9]. In modern versions of React (React 19+), you can pass a reference to a Server Action directly to an event handler prop (like onClick) on native HTML elements within a Server Component [10]. When the event triggers, React will securely invoke the Server Action on the server [8][9][10]. Recommended documentation and composition practices: The standard way to structure server/client composition is the "Children Pattern" (or "Donut Pattern"), which allows you to keep the majority of your application logic on the server [11][5]. - Children Pattern: Instead of importing a Server Component into a Client Component (which would turn the Server Component into a Client Component), pass the Server Component as a child or a prop to the Client Component [11][12]. The Server Component will render on the server, and its output will be passed into the Client Component, which manages the interactivity [2][4][11]. - Push Boundaries to the Leaves: Keep your "use client" boundaries as low as possible in the component tree [3][5]. Only mark the smallest necessary leaf components as Client Components to minimize client-side bundle size [11][5]. - Serializable Props: When passing props across the server-client boundary, remember that data must be serializable (e.g., strings, numbers, objects, arrays) [3][12]. You cannot pass functions or class instances across this boundary unless they are specific React types like Server Actions [3][12].
Citations:
- 1: https://react.dev/reference/rsc/server-components
- 2: https://nextjs.org/docs/app/getting-started/server-and-client-components
- 3: https://www.iamraghuveer.com/posts/nextjs-server-vs-client-components/
- 4: https://vercel.com/academy/nextjs-foundations/client-server-boundaries
- 5: https://ganeshjoshi.dev/blogs/server-vs-client-components-react
- 6: https://nextjs.org/docs/app/glossary
- 7: https://www.joshwcomeau.com/react/server-components/
- 8: https://react.dev/reference/rsc/server-functions
- 9: https://az.react.dev/reference/rsc/server-actions
- 10: Bug: Server functions work on event handler props in Server Components; is this intended? react/react#36040
- 11: https://griban.dev/blog/react-server-components-best-practices
- 12: https://www.stanza.dev/courses/react-modern-patterns/server-components/react-server-client-boundary
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect only the nearby section to understand the article flow.
file="content/blog-post-2026-06-27/rsc-in-2026-a-practical-guide.mdx"
sed -n '40,90p' "$file" | cat -nRepository: deepu0/frontend-junction
Length of output: 1664
Mark this as a client component or split out the interactive part. The onClick handler makes this a client component, so as written it misrepresents an RSC example and skips the "use client" boundary the article should show.
🤖 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-06-27/rsc-in-2026-a-practical-guide.mdx` around lines
53 - 71, The example in Component is interactive because it uses onClick, so it
should not be presented as a pure server component. Mark this snippet as a
client component with a "use client" boundary, or split the button list into a
separate client-only component while keeping the non-interactive parent as the
RSC example. Use the Component and Props symbols to update the example so it
accurately reflects the client/server boundary.
1 participant
User description
Blog post about RSC for Frontend Junction
Summary by CodeRabbit
CodeAnt-AI Description
Publish a new guide on RSC for frontend developers
What Changed
Impact
✅ New frontend learning content✅ Clearer guidance for RSC readers✅ Fresh published blog post💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.