[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"public:announcements":3,"public:navigations:zh":4,"footer:categories:zh":56,"post:detail:post-23-GraphQLvs:zh":177},[],[5,18,25,33,41,49],{"id":6,"title":7,"url":12,"icon":13,"parent_id":13,"location":14,"order":6,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},1,{"zh":8,"en":9,"ja":10,"zh_TW":11},"首页","Home","ホーム","首頁","\u002F",null,"header",true,false,"2026-09-30T18:09:54.251095Z",{"id":19,"title":20,"url":24,"icon":13,"parent_id":13,"location":14,"order":19,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},2,{"zh":21,"en":22,"ja":23,"zh_TW":21},"文章","Posts","記事","\u002Fposts",{"id":26,"title":27,"url":32,"icon":13,"parent_id":13,"location":14,"order":26,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},3,{"zh":28,"en":29,"ja":30,"zh_TW":31},"分类","Categories","カテゴリー","分類","\u002Fcategories",{"id":34,"title":35,"url":40,"icon":13,"parent_id":13,"location":14,"order":34,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},4,{"zh":36,"en":37,"ja":38,"zh_TW":39},"标签","Tags","タグ","標籤","\u002Ftags",{"id":42,"title":43,"url":48,"icon":13,"parent_id":13,"location":14,"order":42,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},5,{"zh":44,"en":45,"ja":46,"zh_TW":47},"关于","About","概要","關於","\u002Fpage\u002Fabout",{"id":50,"title":51,"url":55,"icon":13,"parent_id":13,"location":14,"order":50,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},6,{"zh":52,"en":53,"ja":54,"zh_TW":52},"留言板","Guestbook","ゲストブック","\u002Fpage\u002Fguestbook",[57,73,87,102,117,133,148,162],{"id":6,"name":58,"slug":63,"description":64,"icon":69,"color":70,"cover_image":13,"created_at":71,"post_count":72},{"en":59,"ja":60,"zh":61,"zh_Hant":62},"Technology","テクノロジー","技术","技術","technology",{"en":65,"ja":66,"zh":67,"zh_Hant":68},"Cutting-edge technology exploration and in-depth analysis covering programming languages, frameworks, and architecture design","プログラミング言語、フレームワーク、アーキテクチャ設計を含む先端技術の探究","前沿技术探索与深度分析，涵盖编程语言、框架、架构设计等核心领域","前沿技術探索與深度分析，涵蓋編程語言、框架、架構設計等核心領域","heroicons:cog-6-tooth","#6366f1","2026-09-30T18:09:53.633610Z",8,{"id":19,"name":74,"slug":78,"description":79,"icon":84,"color":85,"cover_image":13,"created_at":86,"post_count":50},{"en":75,"ja":76,"zh":77,"zh_Hant":77},"Tutorial","チュートリアル","教程","tutorial",{"en":80,"ja":81,"zh":82,"zh_Hant":83},"Hands-on tutorials from scratch with clear steps and complete code for developers at all levels","ゼロから始める実践的なチュートリアル。明確な手順と完全なコードで、全てのレベルの開発者に最適","从零开始的实战教程，步骤清晰，代码完整，适合各阶段开发者学习","從零開始的實戰教程，步驟清晰，代碼完整，適合各階段開發者學習","heroicons:academic-cap","#10b981","2026-09-30T18:09:53.641581Z",{"id":26,"name":88,"slug":92,"description":93,"icon":98,"color":99,"cover_image":13,"created_at":100,"post_count":101},{"en":89,"ja":90,"zh":91,"zh_Hant":91},"Frontend","フロントエンド","前端","frontend",{"en":94,"ja":95,"zh":96,"zh_Hant":97},"Full coverage of web frontend development including Vue, React, new CSS features, and performance optimization","Vue、React、CSSの新機能やパフォーマンス最適化を含むWebフロントエンド開発の全領域","Web前端开发全栈覆盖，包括Vue、React、CSS新特性及性能优化等话题","Web前端開發全棧覆蓋，包括Vue、React、CSS新特性及性能優化等話題","heroicons:computer-desktop","#ec4899","2026-09-30T18:09:53.644838Z",7,{"id":34,"name":103,"slug":108,"description":109,"icon":114,"color":115,"cover_image":13,"created_at":116,"post_count":26},{"en":104,"ja":105,"zh":106,"zh_Hant":107},"Backend","バックエンド","后端","後端","backend",{"en":110,"ja":111,"zh":112,"zh_Hant":113},"Server-side development best practices including API design, database optimization, and microservices architecture","API設計、データベース最適化、マイクロサービスアーキテクチャを含むサーバーサイド開発の実践","服务端开发实战经验，API设计、数据库优化、微服务架构等深度内容","服務端開發實戰經驗，API設計、數據庫優化、微服務架構等深度內容","heroicons:server-stack","#f59e0b","2026-09-30T18:09:53.647836Z",{"id":42,"name":118,"slug":123,"description":124,"icon":129,"color":130,"cover_image":13,"created_at":131,"post_count":132},{"en":119,"ja":120,"zh":121,"zh_Hant":122},"Fullstack","フルスタック","全栈","全棧","fullstack",{"en":125,"ja":126,"zh":127,"zh_Hant":128},"End-to-end development guides covering the full project lifecycle and technology stack selection","フロントエンドからバックエンドまでの開発プロセス全体をカバーするガイド","从前端到后端的全流程开发指南，覆盖完整项目生命周期与技术选型","從前端到後端的全流程開發指南，覆蓋完整項目生命週期與技術選型","heroicons:swatch","#8b5cf6","2026-09-30T18:09:53.650513Z",0,{"id":50,"name":134,"slug":139,"description":140,"icon":145,"color":146,"cover_image":13,"created_at":147,"post_count":34},{"en":135,"ja":136,"zh":137,"zh_Hant":138},"Essays","エッセイ","随笔","隨筆","essays",{"en":141,"ja":142,"zh":143,"zh_Hant":144},"Technical reflections and development insights recording the programmer's growth journey","プログラマーの成長の軌跡を記録する技術的考察と開発の洞察","技术思考与开发心得分享，记录程序员成长路上的点滴感悟","技術思考與開發心得分享，記錄程序員成長路上的點滴感悟","heroicons:pencil-square","#f43f5e","2026-09-30T18:09:53.653105Z",{"id":101,"name":149,"slug":153,"description":154,"icon":159,"color":160,"cover_image":13,"created_at":161,"post_count":34},{"en":150,"ja":151,"zh":152,"zh_Hant":152},"Tools","ツール","工具","tools",{"en":155,"ja":156,"zh":157,"zh_Hant":158},"Development toolchain and productivity tool recommendations to supercharge your development experience","開発効率を飛躍的に向上させるツールチェーンと生産性ツールの推奨","开发工具链与效率提升利器推荐，让你的开发体验如虎添翼","開發工具鏈與效率提升利器推薦，讓你的開發體驗如虎添翼","heroicons:wrench-screwdriver","#06b6d4","2026-09-30T18:09:53.655605Z",{"id":72,"name":163,"slug":168,"description":169,"icon":174,"color":175,"cover_image":13,"created_at":176,"post_count":132},{"en":164,"ja":165,"zh":166,"zh_Hant":167},"Translation","翻訳","翻译","翻譯","translation",{"en":170,"ja":171,"zh":172,"zh_Hant":173},"Curated translations of high-quality foreign technical articles to keep up with international trends","国際的な技術トレンドを追うための厳選された海外技術記事の翻訳","优质外文技术文章精选翻译，紧跟国际技术前沿动态","優質外文技術文章精選翻譯，緊跟國際技術前沿動態","heroicons:language","#84cc16","2026-09-30T18:09:53.658041Z",{"id":178,"title":179,"subtitle":13,"slug":180,"source":181,"source_url":13,"audio":13,"video":13,"video_url":13,"content":182,"excerpt":183,"cover_image":13,"author":184,"category":187,"tags":188,"status":210,"visibility":211,"password":13,"views":212,"likes_count":132,"is_pinned":16,"allow_comments":15,"comments_count":101,"is_password_protected":16,"meta_title":179,"meta_description":183,"meta_keywords":213,"created_at":214,"published_at":214,"updated_at":215,"reading_time":6},23,"GraphQL vs REST：从 7 个维度深度对比","post-23-GraphQLvs","原创","# GraphQL vs REST：从 7 个维度深度对比\n\nGraphQL 常被宣传为 REST 的终结者，但实际两者各有适合场景。盲目选择 GraphQL 会带来 N+1 查询、复杂度爆炸、缓存失效等坑；只用 REST 又有过取\u002F欠取问题。理性对比再做选择。\n\n## 典型架构与复杂度防护\n\nGraphQL 单端点接收查询，前端声明式指定字段结构，解决 REST 常见的 20 个接口拼数据或大接口返回 80% 不用字段的问题。但必须在网关层加上查询复杂度分析、字段级权限、深度限制。\n\n```typescript\n```typescript\nimport express, { Request, Response } from \"express\";\nimport { graphqlHTTP } from \"express-graphql\";\nimport { buildSchema, parse, visit, Kind } from \"graphql\";\n\nconst app = express();\napp.use(express.json());\n\nconst schema = buildSchema(`\n  type User { id: ID!; username: String!; orders(limit: Int = 10): [Order!]! }\n  type Order { id: ID!; total: Float!; items(limit: Int = 20): [OrderItem!]! }\n  type OrderItem { productId: ID!; qty: Int!; price: Float! }\n  type Query { user(id: ID!): User; users(limit: Int = 20): [User!]! }\n  schema { query: Query }\n`);\n\nclass ComplexityGuard {\n    private costs: Record\u003Cstring, number> = { orders: 5, items: 2, users: 10 };\n    private readonly MAX = 150;\n    analyze(query: string): { total: number; exceeded: boolean } {\n        const doc = parse(query); let total = 1;\n        visit(doc, {\n            Field: (node) => {\n                const base = this.costs[node.name.value] || 1;\n                const args = Object.fromEntries((node.arguments || []).map(a => [a.name.value, (a.value as any).value]));\n                const mult = args.limit ? Math.ceil(Number(args.limit) \u002F 10) : 1;\n                total += base * mult;\n            },\n        });\n        return { total, exceeded: total > this.MAX };\n    }\n}\n\nconst root = {\n    user: ({ id }: { id: string }) => ({\n        id, username: `u${id}`,\n        orders: ({ limit = 10 }: any) => Array.from({ length: limit }, (_, i) => ({\n            id: `o${i}`, total: 99.5 + i,\n            items: ({ limit = 20 }: any) => Array.from({ length: limit }, (_, k) => ({ productId: `p${k}`, qty: k + 1, price: 9.9 })),\n        })),\n    }),\n    users: ({ limit = 20 }: any) => Array.from({ length: limit }, (_, i) => root.user({ id: String(i + 1) })),\n};\n\nconst guard = new ComplexityGuard();\napp.get(\"\u002Frest\u002Fusers\u002F:id\", (req: Request, res: Response) => {\n    res.json({ data: { id: req.params.id, username: `u${req.params.id}` }, _links: { orders: { href: `\u002Frest\u002Fusers\u002F${req.params.id}\u002Forders` } } });\n});\napp.use(\"\u002Fgraphql\", (req: Request, res: Response, next) => {\n    const q = (req.body?.query) || (req.query.query as string) || \"\";\n    const r = guard.analyze(q);\n    if (r.exceeded) return res.status(400).json({ error: `Complexity ${r.total} exceeds cap 150` });\n    res.setHeader(\"X-GraphQL-Complexity\", String(r.total));\n    next();\n}, graphqlHTTP({ schema, rootValue: root, graphiql: process.env.NODE_ENV !== \"production\" }));\n\napp.listen(3000, () => console.log(\"[compare] REST+GraphQL on :3000\"));\n```\n```\n\n## 七大维度横向对比\n\n| 对比维度 | REST (JSON:API风格) | GraphQL | 胜者 |\n|---------|-------------------|---------|-----|\n| 网络传输效率 | 多请求过取欠取 | 单请求精确字段POST不利CDN | 简单REST赢\u002F复杂视图GraphQL赢 |\n| 前端开发体验 | 新字段等后端加接口 | 自助取字段+内省生成类型 | GraphQL |\n| 后端演进成本 | 版本化管理\u002Fv1\u002Fv2 | 字段弃用平滑但resolver复杂度涨 | REST |\n| HTTP缓存 | 天然支持Get请求 | 需持久化查询ID+自定义层 | REST |\n| 类型安全 | 需OpenAPI代码生成 | Schema强类型+内省生成SDK | GraphQL |\n| 安全风险 | 普通CRUD鉴权易做 | 深度\u002F复杂度\u002F批注入要防护 | REST安全面更小 |\n| 生态工具链 | OpenAPI\u002FPostman成熟 | Apollo Studio\u002FGraphiQL完善 | 打平 |\n\n## 最佳实践\n\n决策树：团队以 BFF 形态存在且前端迭代快 → GraphQL；微服务间调用或纯资源 CRUD → REST；混合架构：BFF 用 GraphQL 组合多个 REST 微服务是目前大厂主流方案。","终结选型焦虑：从网络传输效率、前端开发体验、后端演进成本、缓存策略、类型安全、安全风险、生态工具链 7 大维度系统对比 GraphQL 与 REST，给出清晰决策树与混合架构模式。",{"id":6,"username":185,"nickname":185,"avatar":13,"cover_image":13,"bio":13,"website":13,"github":13,"avatar_source":13,"resolved_avatar_url":13,"title":13,"created_at":186},"Choyeon","2026-09-30T18:09:53.330367Z",{"id":50,"name":137,"slug":139,"description":143,"icon":145,"color":146,"cover_image":13,"created_at":147,"post_count":132},[189,194,199,204],{"id":19,"name":190,"slug":191,"color":192,"icon":13,"is_active":15,"created_at":193,"post_count":132},"FastAPI","fastapi","#009688","2026-09-30T18:09:53.669567Z",{"id":50,"name":195,"slug":196,"color":197,"icon":13,"is_active":15,"created_at":198,"post_count":132},"TypeScript","typescript","#3178c6","2026-09-30T18:09:53.680697Z",{"id":72,"name":200,"slug":201,"color":202,"icon":13,"is_active":15,"created_at":203,"post_count":132},"Node.js","nodejs","#339933","2026-09-30T18:09:53.685769Z",{"id":205,"name":206,"slug":207,"color":208,"icon":13,"is_active":15,"created_at":209,"post_count":132},15,"性能优化","performance","#f97316","2026-09-30T18:09:53.707190Z","published","public",235,"FastAPI,Node.js,TypeScript,性能优化","2026-09-18T16:09:53.733462Z","2026-10-01T13:34:45.954651Z"]