技能 react-server-components-framework
📦

react-server-components-framework

v1.0.0 内容修订 r2 高风险 ⚙️ 外部命令⚡ 包含脚本🌐 网络访问🔑 环境变量

构建 React Server Components

React Server Components 需要仔细划分服务器和客户端边界。此技能提供用于实现的 Next.js App Router 模式、模板和检查清单。

支持: Claude Codex Code(CC)
⚠️ 38 差

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "react-server-components-framework" from https://skillstore.io/skills/ariegoldkin-react-server-components-framework.md and its manifest at https://skillstore.io/api/skills/ariegoldkin-react-server-components-framework/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/ariegoldkin-react-server-components-framework.md 已签名 manifest GET /api/skills/ariegoldkin-react-server-components-framework/manifest 已签名 lockfile GET /api/skills/ariegoldkin-react-server-components-framework/lockfile

测试它

正在使用“react-server-components-framework”。 我需要决定产品页面中的搜索筛选器应在哪里运行。

预期结果:

响应会将服务器渲染的产品数据与交互式筛选控件分离，并解释边界权衡。

正在使用“react-server-components-framework”。 我需要一个用于创建博客文章的 Server Action。

预期结果:

响应会概述验证、会话检查、数据库变更、缓存重新验证、重定向行为和错误状态。

正在使用“react-server-components-framework”。 我正在将 Pages Router 仪表板迁移到 App Router。

预期结果:

响应会将旧版数据获取、布局结构、加载状态和元数据映射到 App Router 等效方案。

安全审计

高风险
v9 • 2026/7/23 打开版本化报告

All 127 static alerts are false positives caused by documentation formatting, standard React patterns, placeholder fetch calls, or server-only environment access. Manual review found stored cross-site scripting, missing authorization, mass assignment, and draft disclosure in the supplied examples. These examples require security hardening before publication.

11
已扫描文件
2,709
分析行数
0
复核项
0
已忽略误报

已确认安全问题 (4)

高
examples/blog-app-example.tsx:69-89examples/blog-app-example.tsx:276-279
Stored Cross-Site Scripting in Blog Example
The blog example stores author-supplied post content and renders it as raw HTML without sanitization. Script-bearing content could execute in readers' browsers.
The input schema accepts unrestricted content, stores it, and later passes it directly to dangerouslySetInnerHTML. No sanitization step appears in the example.
高
templates/server-action-template.ts:30-50templates/server-action-template.ts:110-142templates/server-action-template.ts:151-158templates/server-action-template.ts:174-205templates/server-action-template.ts:219-236
Missing Authorization in Mutating Server Actions
Several exported Server Actions create, delete, toggle, bulk-update, upload, or revalidate without authentication or authorization. Remote callers could abuse these mutation endpoints.
These functions are exported from a use-server module and perform privileged operations without calling the session or ownership checks shown in updateResource.
高
templates/server-action-template.ts:71-92templates/server-action-template.ts:151-158
Mass Assignment in Resource Update Actions
Update actions accept Partial<Resource> and pass it directly to database operations without an allowlist schema. Callers could modify fields outside the intended form.
The exported actions accept caller-provided partial database records and use them as update data. No Zod schema or field allowlist constrains these values.
中
examples/blog-app-example.tsx:238-250
Unpublished Blog Posts Exposed by Slug
The public post page loads any post matching a slug without requiring published status. Anyone who learns a draft slug could read unpublished content.
The listing and static-parameter queries filter published posts, but the page query uses only the slug and renders the returned record without an access check.

风险因素

⚙️ 外部命令 (50)
examples/blog-app-example.tsx:93 examples/blog-app-example.tsx:118 examples/blog-app-example.tsx:226 examples/blog-app-example.tsx:424 references/component-patterns.md:61-62 references/component-patterns.md:62-67 references/component-patterns.md:417-422 references/server-actions.md:22-24 SKILL.md:45 SKILL.md:50 SKILL.md:51 SKILL.md:53 SKILL.md:56 SKILL.md:58 SKILL.md:68-80 SKILL.md:80-83 SKILL.md:83-87 SKILL.md:87-89 SKILL.md:89 SKILL.md:98-107 SKILL.md:107-109 SKILL.md:109-113 SKILL.md:113-124 SKILL.md:124-140 SKILL.md:140-147 SKILL.md:147-152 SKILL.md:152-157 SKILL.md:157-160 SKILL.md:160-164 SKILL.md:164-167 SKILL.md:167-171 SKILL.md:171-173 SKILL.md:173-186 SKILL.md:186-201 SKILL.md:201-212 SKILL.md:212-220 SKILL.md:220-244 SKILL.md:244-245 SKILL.md:245-246 SKILL.md:246-254 SKILL.md:254-267 SKILL.md:267-283 SKILL.md:283-300 SKILL.md:300-304 SKILL.md:304-317 SKILL.md:317-321 SKILL.md:321-334 SKILL.md:334-340 SKILL.md:340 SKILL.md:343-344
⚡ 包含脚本 (1)
references/component-patterns.md:375
🌐 网络访问 (24)
references/component-patterns.md:61 references/component-patterns.md:61 references/data-fetching.md:11 references/data-fetching.md:16 references/data-fetching.md:21 references/data-fetching.md:26 references/data-fetching.md:160 references/data-fetching.md:11 references/data-fetching.md:16 references/data-fetching.md:21 references/data-fetching.md:26 references/data-fetching.md:160 references/migration-guide.md:54 references/migration-guide.md:72 references/migration-guide.md:93 SKILL.md:70 SKILL.md:73 SKILL.md:76 SKILL.md:79 SKILL.md:375 SKILL.md:376 SKILL.md:377 SKILL.md:378 templates/client-component-template.tsx:41
🔑 环境变量 (6)
references/component-patterns.md:59 references/component-patterns.md:59 references/component-patterns.md:59 templates/server-component-template.tsx:30 templates/server-component-template.tsx:30 templates/server-component-template.tsx:30
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/ariegoldkin-react-server-components-framework/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/ariegoldkin-react-server-components-framework/security.svg)](https://skillstore.io/skills/ariegoldkin-react-server-components-framework?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/ariegoldkin-react-server-components-framework?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ariegoldkin-react-server-components-framework/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/ariegoldkin-react-server-components-framework.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

AI Agent Hub. (2026). react-server-components-framework security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/ariegoldkin-react-server-components-framework/audits/9

BibTeX 引用

@techreport{ai-agent-hub-ariegoldkin-react-server-components-framework-2026, author = {AI Agent Hub}, title = {react-server-components-framework security audit report (audit version 9)}, institution = {Skillstore}, year = {2026}, number = {9}, url = {https://skillstore.io/skills/ariegoldkin-react-server-components-framework/audits/9}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "react-server-components-framework security audit report (audit version 9)" version: "1.0.0" type: report authors: - name: "AI Agent Hub" date-released: "2026-07-23" url: "https://skillstore.io/skills/ariegoldkin-react-server-components-framework/audits/9" identifiers: - type: other value: "skillstore:ariegoldkin-react-server-components-framework:audit:9" description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据 证据置信度: 中
45
架构
100
可维护性
87
内容
70
社区
83
规范符合性

你能构建什么

规划 App Router 架构

定义哪些组件应在服务器上运行，哪些组件需要客户端交互能力。

实现 Server Actions

创建带有验证、缓存重新验证、重定向和渐进增强的表单变更。

从 Pages Router 迁移

将数据获取、布局、元数据和 API 路由转换为 App Router 模式。

试试这些提示

选择组件边界 
查看此功能，并告诉我哪些部分应作为 Server Components，哪些部分应作为 Client Components。
创建 Server Component 
使用此技能设计一个 Server Component，用于获取数据、处理错误，并通过 Suspense 对较慢的部分进行流式处理。
设计 Server Action 
为此表单创建一个 Server Action 计划，包含验证、授权、重新验证和用户反馈状态。
审查 App Router 迁移 
将此 Pages Router 实现与 App Router 最佳实践进行比较，并列出具体的迁移步骤和风险。

最佳实践

  • 保持 Client Components 精简，并将它们放在靠近交互式 UI 的位置。
  • 在更改数据之前，验证并授权每个 Server Action。
  • 围绕独立的慢速数据源使用 Suspense 边界。

避免

  • 不要在没有明确需求的情况下将整个页面做成 Client Component。
  • 不要跨服务器和客户端边界传递不可序列化的值。
  • 不要在未添加项目特定访问控制的情况下复制示例变更。

常见问题

此技能会安装 React 框架吗？
不会。它为 Next.js App Router 项目提供指导、模板、示例和检查清单。
它能帮助处理 Server Actions 吗？
可以。它涵盖验证、缓存重新验证、重定向、乐观 UI 和表单模式。
它支持 Client Components 吗？
支持。它解释何时使用 Client Components，以及如何保持客户端边界精简。
它对迁移有用吗？
有用。它包含从 Pages Router 模式迁移到 App Router 模式的指导。
它会替我处理身份验证吗？
不会。身份验证示例是占位内容，必须根据你的项目进行调整。
哪些工具可以使用它？
元数据列出了对 Claude、Codex 和 Claude Code 的支持。

开发者详情

许可证

MIT

作者版本

v1.0.0

Skillstore 修订

r2

仓库

https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/react-server-components-framework

引用

89edfdc710d0846129dcee6a929477b04f08052c

维护新鲜度

2026/7/25

使用量

6 次下载 · 187 次浏览

文件结构

📁 checklists/

📄 rsc-implementation-checklist.md

📁 examples/

📄 blog-app-example.tsx

📁 references/

📄 component-patterns.md

📄 data-fetching.md

📄 migration-guide.md

📄 routing-patterns.md

📄 server-actions.md

📄 SKILL.md

📁 templates/

📄 client-component-template.tsx

📄 server-action-template.ts

📄 server-component-template.tsx

AI Agent Hub 的更多技能

相关技能

查看全部