{"id":40430,"date":"2025-05-29T07:13:05","date_gmt":"2025-05-28T23:13:05","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/40430.html"},"modified":"2025-05-29T07:13:05","modified_gmt":"2025-05-28T23:13:05","slug":"react-%e7%9a%84%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%bb%84%e4%bb%b6%ef%bc%88server-components%ef%bc%89%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f%e5%ae%83%e5%af%b9%e5%ba%94%e7%94%a8%e6%80%a7%e8%83%bd%e6%9c%89","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/40430.html","title":{"rendered":"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f"},"content":{"rendered":"

\u5927\u767d\u8bddReact \u7684\u670d\u52a1\u5668\u7ec4\u4ef6（Server Components）\u662f\u4ec0\u4e48？\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347？<\/h3>\n

\u524d\u7aef\u5c0f\u4f19\u4f34\u4eec，\u6709\u6ca1\u6709\u88ab\u201c\u9996\u5c4f\u52a0\u8f7d10\u79d2\u201d\u7684\u7528\u6237\u6295\u8bc9\u641e\u5230\u5931\u7720？\u6216\u8005\u4e3a\u4e86\u4f18\u5316SEO，\u5728SSR（\u670d\u52a1\u7aef\u6e32\u67d3）\u548cCSR（\u5ba2\u6237\u7aef\u6e32\u67d3）\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3？\u4eca\u5929\u54b1\u4eec\u804a\u70b9\u201c\u524d\u7aef\u65b0\u57fa\u5efa\u201d\u2014\u2014React\u7684\u670d\u52a1\u5668\u7ec4\u4ef6（Server Components），\u5b83\u80fd\u8ba9\u4f60\u7684\u5e94\u7528\u5feb\u5230\u98de\u8d77，\u8fd8\u80fd\u5927\u5e45\u964d\u4f4e\u5f00\u53d1\u590d\u6742\u5ea6！\u770b\u5b8c\u8fd9\u7bc7，\u4f60\u4e0d\u4ec5\u80fd\u641e\u61c2\u5b83\u662f\u5565，\u8fd8\u80fd\u548c\u9762\u8bd5\u5b98\u5520\u660e\u767d\u5b83\u7684\u201c\u5feb\u201d\u4ece\u54ea\u6765～<\/p>\n

\u4e00\u3001\u4f20\u7edf\u524d\u7aef\u6e32\u67d3\u7684"\u4e09\u5927\u75db"<\/h3>\n

\u5148\u8bf4\u8bf4\u6211\u505a\u7535\u5546\u7f51\u7ad9\u65f6\u8e29\u7684\u5751：<\/p>\n

  • \u9996\u5c4f\u52a0\u8f7d\u6162：\u4e00\u4e2a\u5546\u54c1\u8be6\u60c5\u9875，\u524d\u7aef\u8981\u52a0\u8f7d2MB\u7684JSbundle，\u7528\u6237\u624b\u673a\u6253\u5f00\u5f97\u7b495\u79d2，\u8f6c\u5316\u7387\u76f4\u63a5\u638930%；<\/li>\n
  • SEO\u96be\u641e：\u5546\u54c1\u9875\u7528CSR（\u5ba2\u6237\u7aef\u6e32\u67d3），\u641c\u7d22\u5f15\u64ce\u722c\u4e0d\u5230\u52a8\u6001\u5185\u5bb9，\u5173\u952e\u8bcd\u6392\u540d\u603b\u4e0a\u4e0d\u53bb；<\/li>\n
  • \u6570\u636e\u83b7\u53d6\u9ebb\u70e6：\u524d\u7aef\u8981\u8c035\u4e2aAPI（\u7528\u6237\u4fe1\u606f\u3001\u5546\u54c1\u8be6\u60c5\u3001\u63a8\u8350\u5217\u8868\u2026），\u4ee3\u7801\u91cc\u5168\u662fuseEffect\u5d4c\u5957，\u7ef4\u62a4\u8d77\u6765\u50cf\u62c6\u70b8\u5f39\u3002<\/li>\n

    \u8fd9\u4e9b\u95ee\u9898\u7684\u6839\u6e90，\u5176\u5b9e\u662f\u4f20\u7edf\u524d\u7aef\u6e32\u67d3\u6a21\u5f0f\u7684\u201c\u5ba2\u6237\u7aef\u8d1f\u62c5\u8fc7\u91cd\u201d：\u6240\u6709\u6570\u636e\u83b7\u53d6\u3001\u8ba1\u7b97\u3001\u6e32\u67d3\u90fd\u6324\u5728\u5ba2\u6237\u7aef，\u624b\u673a\/\u6d4f\u89c8\u5668\u7684\u5c0f\u8eab\u677f\u6839\u672c\u625b\u4e0d\u4f4f\u3002\u800cReact\u670d\u52a1\u5668\u7ec4\u4ef6（Server Components），\u5c31\u662f\u6765\u7ed9\u5ba2\u6237\u7aef\u201c\u51cf\u8d1f\u201d\u7684！<\/p>\n

    \u4e8c\u3001\u670d\u52a1\u5668\u7ec4\u4ef6\u7684"\u5206\u5de5\u54f2\u5b66"<\/h3>\n

    Server Components\u7684\u6838\u5fc3\u662f\u201c\u524d\u540e\u7aef\u5206\u5de5\u534f\u4f5c\u201d\u2014\u2014\u628a\u9002\u5408\u670d\u52a1\u5668\u505a\u7684\u4e8b（\u6570\u636e\u83b7\u53d6\u3001\u91cd\u8ba1\u7b97）\u4ea4\u7ed9\u670d\u52a1\u5668，\u5ba2\u6237\u7aef\u53ea\u8d1f\u8d23\u4ea4\u4e92\u6027\u5f3a\u7684\u90e8\u5206（\u6309\u94ae\u3001\u8868\u5355\u3001\u52a8\u753b）\u3002\u5b83\u5c31\u50cf\u201c\u9910\u5385\u540e\u53a8+\u670d\u52a1\u5458\u201d：<\/p>\n

      \n
    • \u670d\u52a1\u5668\u7ec4\u4ef6（\u540e\u53a8）：\u85cf\u5728\u540e\u53f0，\u8d1f\u8d23\u201c\u505a\u83dc\u201d（\u83b7\u53d6\u6570\u636e\u5e93\u6570\u636e\u3001\u8c03\u7528API\u3001\u590d\u6742\u8ba1\u7b97），\u505a\u597d\u540e\u628a\u201c\u6210\u54c1\u201d（HTML+\u6570\u636e）\u4f20\u7ed9\u5ba2\u6237\u7aef；<\/li>\n
    • \u5ba2\u6237\u7aef\u7ec4\u4ef6（\u670d\u52a1\u5458）：\u5728\u524d\u7aef\u548c\u7528\u6237\u4e92\u52a8，\u8d1f\u8d23\u201c\u7aef\u83dc\u201d（\u5c55\u793a\u5185\u5bb9）\u3001\u201c\u70b9\u83dc\u201d（\u5904\u7406\u70b9\u51fb\u3001\u8f93\u5165）\u3002<\/li>\n<\/ul>\n

      1. \u670d\u52a1\u5668\u7ec4\u4ef6\u76843\u4e2a\u5173\u952e\u7279\u6027<\/h4>\n
        \n
      • \u65e0\u5ba2\u6237\u7aefJS：\u670d\u52a1\u5668\u7ec4\u4ef6\u6e32\u67d3\u6210\u7eafHTML，\u4e0d\u6253\u5305\u5230\u5ba2\u6237\u7aefJSbundle\u91cc，\u76f4\u63a5\u51cf\u5c11\u524d\u7aef\u4ee3\u7801\u4f53\u79ef；<\/li>\n
      • \u76f4\u63a5\u8bbf\u95ee\u540e\u7aef\u8d44\u6e90：\u53ef\u4ee5\u76f4\u63a5\u8fde\u63a5\u6570\u636e\u5e93\u3001\u8c03\u7528\u5185\u90e8API，\u65e0\u9700\u901a\u8fc7\u524d\u7aef\u63a5\u53e3\u8f6c\u53d1；<\/li>\n
      • \u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6\u5171\u5b58：\u4e00\u4e2a\u9875\u9762\u91cc\u53ef\u4ee5\u6df7\u5408\u670d\u52a1\u5668\u7ec4\u4ef6（\u8d1f\u8d23\u6570\u636e）\u548c\u5ba2\u6237\u7aef\u7ec4\u4ef6（\u8d1f\u8d23\u4ea4\u4e92），\u7075\u6d3b\u5206\u5de5\u3002<\/li>\n<\/ul>\n

        2. \u6e32\u67d3\u6d41\u7a0b：\u4ece\u201c\u5ba2\u6237\u7aef\u5168\u5305\u201d\u5230\u201c\u524d\u540e\u7aef\u5206\u5de5\u201d<\/h4>\n

        \u4f20\u7edfCSR\u7684\u6d41\u7a0b：<\/p>\n

      • \u6d4f\u89c8\u5668\u4e0b\u8f7dHTML\u2192\u52a0\u8f7dJSbundle\u2192\u6267\u884cJS\u2192\u8c03\u7528API\u2192\u6e32\u67d3\u9875\u9762（\u8017\u65f6：JS\u4e0b\u8f7d+API\u8bf7\u6c42）\u3002<\/li>\n

        Server Components\u7684\u6d41\u7a0b：<\/p>\n

      • \u6d4f\u89c8\u5668\u8bf7\u6c42\u9875\u9762\u2192\u670d\u52a1\u5668\u7528\u670d\u52a1\u5668\u7ec4\u4ef6\u83b7\u53d6\u6570\u636e+\u6e32\u67d3HTML\u2192\u8fd4\u56de\u7ed9\u6d4f\u89c8\u5668（\u8017\u65f6：\u670d\u52a1\u5668\u6570\u636e\u83b7\u53d6+\u6e32\u67d3）；<\/li>\n
      • \u5ba2\u6237\u7aef\u53ea\u52a0\u8f7d\u5fc5\u8981\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6JS（\u5982\u4ea4\u4e92\u6309\u94ae），\u65e0\u9700\u7b49\u5f85\u5927bundle\u3002<\/li>\n

        \u4e09\u3001\u4ee3\u7801\u793a\u4f8b：\u4ece"\u6162\u52a0\u8f7d"\u5230"\u79d2\u5f00\u9875"<\/h3>\n

        \u793a\u4f8b1：\u4f20\u7edfCSR\u7684\u5546\u54c1\u8be6\u60c5\u9875（\u8e29\u5751\u73b0\u573a）<\/h4>\n

        \u5148\u770b\u4e00\u4e2a\u4f20\u7edf\u5ba2\u6237\u7aef\u6e32\u67d3\u7684\u5546\u54c1\u9875\u4ee3\u7801\u2014\u2014\u524d\u7aef\u8981\u52a0\u8f7d\u5927bundle，\u8fd8\u8981\u8c03\u591a\u4e2aAPI：<\/p>\n

        \/\/ \u5ba2\u6237\u7aef\u7ec4\u4ef6（CSR\u6a21\u5f0f）<\/span>
        \n'use client'<\/span>;<\/span> \/\/ \u6807\u8bb0\u4e3a\u5ba2\u6237\u7aef\u7ec4\u4ef6（React 18+\u8bed\u6cd5）<\/span>
        \nimport<\/span> {<\/span> useEffect,<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span><\/p>\n

        function<\/span> ProductDetail<\/span>(<\/span>{<\/span> productId }<\/span><\/span>)<\/span> {<\/span>
        \n const<\/span> [<\/span>product,<\/span> setProduct]<\/span> =<\/span> useState<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
        \n const<\/span> [<\/span>recommendations,<\/span> setRecommendations]<\/span> =<\/span> useState<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

        \/\/ \u524d\u7aef\u8c03\u7528API\u83b7\u53d6\u5546\u54c1\u8be6\u60c5（\u8017\u65f6：\u7f51\u7edc\u8bf7\u6c42）<\/span>
        \n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
        \n fetch<\/span>(<\/span>`<\/span>\/api\/products\/<\/span>${<\/span>productId}<\/span><\/span>`<\/span><\/span>)<\/span>
        \n .<\/span>then<\/span>(<\/span>res<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>
        \n .<\/span>then<\/span>(<\/span>data<\/span> =><\/span> setProduct<\/span>(<\/span>data)<\/span>)<\/span>;<\/span>
        \n }<\/span>,<\/span> [<\/span>productId]<\/span>)<\/span>;<\/span><\/p>\n

        \/\/ \u524d\u7aef\u8c03\u7528API\u83b7\u53d6\u63a8\u8350\u5546\u54c1（\u53c8\u4e00\u4e2a\u7f51\u7edc\u8bf7\u6c42）<\/span>
        \n useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
        \n fetch<\/span>(<\/span>`<\/span>\/api\/recommendations\/<\/span>${<\/span>productId}<\/span><\/span>`<\/span><\/span>)<\/span>
        \n .<\/span>then<\/span>(<\/span>res<\/span> =><\/span> res.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>
        \n .<\/span>then<\/span>(<\/span>data<\/span> =><\/span> setRecommendations<\/span>(<\/span>data)<\/span>)<\/span>;<\/span>
        \n }<\/span>,<\/span> [<\/span>productId]<\/span>)<\/span>;<\/span><\/p>\n

        if<\/span> (<\/span>!<\/span>product)<\/span> return<\/span> <<\/span>div><\/span>\u52a0\u8f7d\u4e2d…<\/span><<\/span>\/<\/span>div><\/span>;<\/span><\/p>\n

        return<\/span> (<\/span>
        \n <<\/span>div className=<\/span>"product-detail"<\/span>><\/span>
        \n <<\/span>h1><\/span>{<\/span>product.<\/span>name}<\/span><<\/span>\/<\/span>h1><\/span>
        \n <<\/span>p><\/span>\u4ef7\u683c：{<\/span>product.<\/span>price}<\/span><<\/span>\/<\/span>p><\/span>
        \n <<\/span>h2><\/span>\u731c\u4f60\u559c\u6b22：<<\/span>\/<\/span>h2><\/span>
        \n <<\/span>ul><\/span>
        \n {<\/span>recommendations.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> (<\/span>
        \n <<\/span>li key=<\/span>{<\/span>item.<\/span>id}<\/span>><\/span>{<\/span>item.<\/span>name}<\/span><<\/span>\/<\/span>li><\/span>
        \n )<\/span>)<\/span>}<\/span>
        \n <<\/span>\/<\/span>ul><\/span>
        \n <<\/span>\/<\/span>div><\/span>
        \n )<\/span>;<\/span>
        \n}<\/span><\/p>\n

        \u95ee\u9898：<\/p>\n

          \n
        • \u524d\u7aef\u8981\u52a0\u8f7dProductDetail\u7ec4\u4ef6\u7684JS\u4ee3\u7801（\u5047\u8bbe50KB）；<\/li>\n
        • \u9875\u9762\u6e32\u67d3\u524d\u9700\u8981\u7b49\u5f852\u6b21API\u8bf7\u6c42（\u6bcf\u6b21500ms，\u51711000ms）；<\/li>\n
        • \u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u2248JS\u4e0b\u8f7d\u65f6\u95f4（50ms）+ API\u8bf7\u6c42\u65f6\u95f4（1000ms）= 1050ms（\u624b\u673a\u4e0a\u66f4\u6162）\u3002<\/li>\n<\/ul>\n

          \u793a\u4f8b2：Server Components\u4f18\u5316\u7248（\u79d2\u5f00\u9875）<\/h4>\n

          \u7528\u670d\u52a1\u5668\u7ec4\u4ef6\u628a\u6570\u636e\u83b7\u53d6\u79fb\u5230\u670d\u52a1\u5668，\u5ba2\u6237\u7aef\u53ea\u8d1f\u8d23\u5c55\u793a：<\/p>\n

          \/\/ \u670d\u52a1\u5668\u7ec4\u4ef6（\u65e0\u9700\u6807\u8bb0，\u9ed8\u8ba4\u662f\u670d\u52a1\u5668\u7ec4\u4ef6）<\/span>
          \n\/\/ \u76f4\u63a5\u8bbf\u95ee\u6570\u636e\u5e93（\u65e0\u9700\u901a\u8fc7API）<\/span>
          \nasync<\/span> function<\/span> ProductDetailServer<\/span>(<\/span>{<\/span> productId }<\/span><\/span>)<\/span> {<\/span>
          \n \/\/ \u670d\u52a1\u5668\u76f4\u63a5\u67e5\u8be2\u6570\u636e\u5e93（\u6bd4\u524d\u7aef\u8c03API\u5feb3-5\u500d）<\/span>
          \n const<\/span> product =<\/span> await<\/span> db.<\/span>query<\/span>(<\/span>`<\/span>SELECT * FROM products WHERE id = ?<\/span>`<\/span><\/span>,<\/span> [<\/span>productId]<\/span>)<\/span>;<\/span>
          \n \/\/ \u670d\u52a1\u5668\u76f4\u63a5\u67e5\u8be2\u63a8\u8350\u5546\u54c1（\u65e0\u9700\u989d\u5916\u7f51\u7edc\u8bf7\u6c42）<\/span>
          \n const<\/span> recommendations =<\/span> await<\/span> db.<\/span>query<\/span>(<\/span>`<\/span>SELECT * FROM recommendations WHERE product_id = ?<\/span>`<\/span><\/span>,<\/span> [<\/span>productId]<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u6e32\u67d3\u6210HTML，\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef<\/span>
          \n return<\/span> (<\/span>
          \n <<\/span>div className=<\/span>"product-detail"<\/span>><\/span>
          \n <<\/span>h1><\/span>{<\/span>product.<\/span>name}<\/span><<\/span>\/<\/span>h1><\/span>
          \n <<\/span>p><\/span>\u4ef7\u683c：{<\/span>product.<\/span>price}<\/span><<\/span>\/<\/span>p><\/span>
          \n <<\/span>h2><\/span>\u731c\u4f60\u559c\u6b22：<<\/span>\/<\/span>h2><\/span>
          \n <<\/span>ul><\/span>
          \n {<\/span>recommendations.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> (<\/span>
          \n <<\/span>li key=<\/span>{<\/span>item.<\/span>id}<\/span>><\/span>{<\/span>item.<\/span>name}<\/span><<\/span>\/<\/span>li><\/span>
          \n )<\/span>)<\/span>}<\/span>
          \n <<\/span>\/<\/span>ul><\/span>
          \n <<\/span>\/<\/span>div><\/span>
          \n )<\/span>;<\/span>
          \n}<\/span><\/p>\n

          \/\/ \u5ba2\u6237\u7aef\u7ec4\u4ef6（\u8d1f\u8d23\u4ea4\u4e92，\u5982\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d\u6309\u94ae）<\/span>
          \n'use client'<\/span>;<\/span>
          \nimport<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span><\/p>\n

          function<\/span> AddToCartButton<\/span>(<\/span>{<\/span> productId }<\/span><\/span>)<\/span> {<\/span>
          \n const<\/span> [<\/span>isAdded,<\/span> setIsAdded]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/p>\n

          const<\/span> handleAdd<\/span> =<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n await<\/span> fetch<\/span>(<\/span>`<\/span>\/api\/cart<\/span>`<\/span><\/span>,<\/span> {<\/span> method<\/span>:<\/span> 'POST'<\/span>,<\/span> body<\/span>:<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span> productId }<\/span>)<\/span> }<\/span>)<\/span>;<\/span>
          \n setIsAdded<\/span>(<\/span>true<\/span>)<\/span>;<\/span>
          \n }<\/span>;<\/span><\/p>\n

          return<\/span> (<\/span>
          \n <<\/span>button onClick=<\/span>{<\/span>handleAdd}<\/span>><\/span>
          \n {<\/span>isAdded ?<\/span> '\u5df2\u52a0\u5165\u8d2d\u7269\u8f66'<\/span> :<\/span> '\u52a0\u5165\u8d2d\u7269\u8f66'<\/span>}<\/span>
          \n <<\/span>\/<\/span>button><\/span>
          \n )<\/span>;<\/span>
          \n}<\/span><\/p>\n

          \/\/ \u9875\u9762\u7ec4\u4ef6（\u6df7\u5408\u670d\u52a1\u5668+\u5ba2\u6237\u7aef\u7ec4\u4ef6）<\/span>
          \nexport<\/span> default<\/span> async<\/span> function<\/span> ProductPage<\/span>(<\/span>{<\/span> params }<\/span><\/span>)<\/span> {<\/span>
          \n return<\/span> (<\/span>
          \n <<\/span>div><\/span>
          \n {<\/span>\/* \u670d\u52a1\u5668\u7ec4\u4ef6：\u8d1f\u8d23\u6570\u636e\u83b7\u53d6\u548c\u4e3b\u5185\u5bb9\u6e32\u67d3 *\/<\/span>}<\/span>
          \n <<\/span>ProductDetailServer productId=<\/span>{<\/span>params.<\/span>productId}<\/span> \/<\/span>><\/span>
          \n {<\/span>\/* \u5ba2\u6237\u7aef\u7ec4\u4ef6：\u8d1f\u8d23\u4ea4\u4e92 *\/<\/span>}<\/span>
          \n <<\/span>AddToCartButton productId=<\/span>{<\/span>params.<\/span>productId}<\/span> \/<\/span>><\/span>
          \n <<\/span>\/<\/span>div><\/span>
          \n )<\/span>;<\/span>
          \n}<\/span><\/p>\n

          \u6548\u679c：<\/p>\n

            \n
          • \u670d\u52a1\u5668\u7ec4\u4ef6ProductDetailServer\u4e0d\u6253\u5305\u5230\u5ba2\u6237\u7aefJSbundle，\u524d\u7aef\u53ea\u9700\u52a0\u8f7dAddToCartButton\u7684JS（\u7ea610KB）；<\/li>\n
          • \u6570\u636e\u83b7\u53d6\u5728\u670d\u52a1\u5668\u5b8c\u6210（\u6570\u636e\u5e93\u67e5\u8be2\u2248200ms），\u65e0\u9700\u524d\u7aef\u7b49\u5f85API\u8bf7\u6c42；<\/li>\n
          • \u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u2248\u670d\u52a1\u5668\u6e32\u67d3\u65f6\u95f4（200ms）+ HTML\u4f20\u8f93\u65f6\u95f4（10ms）= 210ms（\u6bd4CSR\u5feb5\u500d！）\u3002<\/li>\n<\/ul>\n

            \u56db\u3001\u4f20\u7edf\u6a21\u5f0f vs Server Components<\/h3>\n

            \u7528\u8868\u683c\u5bf9\u6bd4\u66f4\u76f4\u89c2：<\/p>\n\n\u5bf9\u6bd4\u9879\u4f20\u7edfCSRServer Components<\/tr>\n\n\n\n\n\n\n\n
            \u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4<\/td>\n1000ms（JS\u4e0b\u8f7d+API\u8bf7\u6c42）<\/td>\n200ms（\u670d\u52a1\u5668\u76f4\u63a5\u6e32\u67d3）<\/td>\n<\/tr>\n
            \u5ba2\u6237\u7aefJS\u4f53\u79ef<\/td>\n50KB（\u4e3b\u7ec4\u4ef6）+ 30KB（\u4f9d\u8d56）<\/td>\n10KB（\u4ec5\u4ea4\u4e92\u7ec4\u4ef6）<\/td>\n<\/tr>\n
            \u6570\u636e\u83b7\u53d6\u5ef6\u8fdf<\/td>\n\u524d\u7aef\u8c03API（500ms\/\u6b21）<\/td>\n\u670d\u52a1\u5668\u76f4\u8fde\u6570\u636e\u5e93（200ms\/\u6b21）<\/td>\n<\/tr>\n
            SEO\u53cb\u597d\u5ea6<\/td>\n\u5dee（\u5185\u5bb9\u7531JS\u52a8\u6001\u751f\u6210）<\/td>\n\u597d（\u670d\u52a1\u5668\u8fd4\u56de\u5b8c\u6574HTML）<\/td>\n<\/tr>\n
            \u5f00\u53d1\u590d\u6742\u5ea6<\/td>\n\u524d\u7aef\u8981\u5904\u7406API\u8c03\u7528\u3001\u52a0\u8f7d\u72b6\u6001<\/td>\n\u6570\u636e\u83b7\u53d6\u79fb\u5230\u670d\u52a1\u5668，\u4ee3\u7801\u66f4\u7b80\u6d01<\/td>\n<\/tr>\n
            \u7f51\u7edc\u8bf7\u6c42\u6b21\u6570<\/td>\n2\u6b21API\u8bf7\u6c42+1\u6b21JSbundle\u4e0b\u8f7d<\/td>\n0\u6b21API\u8bf7\u6c42（\u670d\u52a1\u5668\u5185\u90e8\u5904\u7406）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            \u4e94\u3001\u9762\u8bd5\u9898\u56de\u7b54\u65b9\u6cd5<\/h3>\n

            \u6b63\u5e38\u56de\u7b54（\u7ed3\u6784\u5316）：<\/h4>\n

            \u201cReact\u670d\u52a1\u5668\u7ec4\u4ef6（Server Components）\u662fReact 18+\u5f15\u5165\u7684\u65b0\u7279\u6027，\u6838\u5fc3\u662f\u5c06\u7ec4\u4ef6\u5206\u4e3a\u670d\u52a1\u5668\u7aef\u548c\u5ba2\u6237\u7aef\u6267\u884c：<\/p>\n

          • \u5206\u5de5\u6a21\u5f0f：\u670d\u52a1\u5668\u7ec4\u4ef6\u8d1f\u8d23\u6570\u636e\u83b7\u53d6\u3001\u91cd\u8ba1\u7b97，\u6e32\u67d3\u6210HTML\u8fd4\u56de；\u5ba2\u6237\u7aef\u7ec4\u4ef6\u8d1f\u8d23\u4ea4\u4e92\u903b\u8f91（\u5982\u70b9\u51fb\u3001\u8868\u5355）；<\/li>\n
          • \u6027\u80fd\u63d0\u5347：\u51cf\u5c11\u5ba2\u6237\u7aefJS\u4f53\u79ef（\u670d\u52a1\u5668\u7ec4\u4ef6\u4e0d\u6253\u5305\u5230bundle）\u3001\u964d\u4f4e\u6570\u636e\u83b7\u53d6\u5ef6\u8fdf（\u670d\u52a1\u5668\u76f4\u8fde\u6570\u636e\u5e93）\u3001\u63d0\u5347\u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6；<\/li>\n
          • \u6280\u672f\u7279\u70b9：\u65e0\u5ba2\u6237\u7aefJS\u3001\u53ef\u76f4\u63a5\u8bbf\u95ee\u540e\u7aef\u8d44\u6e90（\u6570\u636e\u5e93\/API）\u3001\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6\u6df7\u5408\u4f7f\u7528；<\/li>\n
          • \u9002\u7528\u573a\u666f：\u6570\u636e\u9a71\u52a8\u7684\u9875\u9762（\u5982\u5546\u54c1\u8be6\u60c5\u9875\u3001\u7528\u6237\u8d44\u6599\u9875）\u3001\u9700\u8981\u4f18\u5316\u9996\u5c4f\u548cSEO\u7684\u573a\u666f\u3002\u201d<\/li>\n

            \u5927\u767d\u8bdd\u56de\u7b54（\u63a5\u5730\u6c14）：<\/h4>\n

            \u201c\u670d\u52a1\u5668\u7ec4\u4ef6\u5c31\u50cf\u5916\u5356\u7684\u2018\u4e2d\u592e\u53a8\u623f\u2019\u2014\u2014\u524d\u7aef\u5c31\u50cf\u7528\u6237\u624b\u673a，\u4ee5\u524d\u70b9\u5916\u5356\u5f97\u5148\u4e0b\u8f7d\u2018\u83dc\u5355APP\u2019（JSbundle），\u518d\u4e0b\u5355\u7b49\u5916\u5356（API\u8bf7\u6c42），\u6162\u5f97\u5f88\u3002\u73b0\u5728\u2018\u4e2d\u592e\u53a8\u623f\u2019（\u670d\u52a1\u5668）\u76f4\u63a5\u505a\u597d\u83dc（\u6e32\u67d3\u597dHTML+\u6570\u636e），\u8fde\u83dc\u5e26\u5305\u88c5（HTML）\u4e00\u8d77\u9001\u5230\u7528\u6237\u624b\u673a，\u7528\u6237\u6253\u5f00\u5c31\u80fd\u5403（\u79d2\u5f00\u9875\u9762）\u3002\u624b\u673a（\u5ba2\u6237\u7aef）\u53ea\u9700\u8981\u88c5\u4e2a\u2018\u52a0\u70ed\u529f\u80fd\u2019（\u4ea4\u4e92\u7ec4\u4ef6）\u5c31\u884c，\u7701\u5185\u5b58\u53c8\u5feb～\u201d<\/p>\n

            \u516d\u3001\u603b\u7ed3：3\u5927\u4f18\u52bf+2\u4e2a\u9002\u7528\u573a\u666f<\/h3>\n

            3\u5927\u4f18\u52bf：<\/h4>\n
          • \u5feb：\u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6\u63d0\u53473-5\u500d（\u51cf\u5c11JS\u4e0b\u8f7d\u548cAPI\u8bf7\u6c42）；<\/li>\n
          • \u8f7b：\u5ba2\u6237\u7aefJS\u4f53\u79ef\u51cf\u5c1170%+（\u670d\u52a1\u5668\u7ec4\u4ef6\u4e0d\u6253\u5305）；<\/li>\n
          • \u6613\u7ef4\u62a4：\u6570\u636e\u83b7\u53d6\u903b\u8f91\u79fb\u5230\u670d\u52a1\u5668，\u524d\u7aef\u4ee3\u7801\u66f4\u7b80\u6d01（\u544a\u522buseEffect\u5d4c\u5957\u5730\u72f1）\u3002<\/li>\n

            2\u4e2a\u9002\u7528\u573a\u666f：<\/h4>\n
              \n
            • \u6570\u636e\u9a71\u52a8\u9875\u9762：\u5982\u5546\u54c1\u8be6\u60c5\u9875\u3001\u62a5\u8868\u9875（\u9700\u8981\u5927\u91cf\u6570\u636e\u6e32\u67d3，\u4ea4\u4e92\u5c11）；<\/li>\n
            • SEO\u654f\u611f\u9875\u9762：\u5982\u535a\u5ba2\u6587\u7ae0\u9875\u3001\u65b0\u95fb\u8be6\u60c5\u9875（\u9700\u8981\u641c\u7d22\u5f15\u64ce\u6293\u53d6\u5b8c\u6574\u5185\u5bb9）\u3002<\/li>\n<\/ul>\n

              \u4e03\u3001\u6269\u5c55\u601d\u8003：4\u4e2a\u9ad8\u9891\u95ee\u9898\u89e3\u7b54<\/h3>\n

              \u95ee\u98981：Server Components\u548cSSR（\u670d\u52a1\u7aef\u6e32\u67d3）\u6709\u4ec0\u4e48\u533a\u522b？<\/h4>\n

              \u89e3\u7b54：<\/p>\n

                \n
              • SSR：\u670d\u52a1\u5668\u6e32\u67d3\u6574\u4e2a\u9875\u9762\u7684HTML，\u4f46\u524d\u7aef\u4ecd\u9700\u52a0\u8f7d\u5b8c\u6574\u7684JSbundle（\u5305\u542b\u6240\u6709\u7ec4\u4ef6\u903b\u8f91）；<\/li>\n
              • Server Components：\u670d\u52a1\u5668\u6e32\u67d3\u7684\u7ec4\u4ef6\u4e0d\u6253\u5305\u5230\u5ba2\u6237\u7aefJSbundle，\u53ea\u6709\u5ba2\u6237\u7aef\u7ec4\u4ef6\u9700\u8981\u52a0\u8f7dJS；<\/li>\n
              • \u603b\u7ed3：SSR\u662f\u201c\u5148\u7ed9HTML，\u518d\u8865JS\u201d；Server Components\u662f\u201c\u53ea\u7ed9\u9700\u8981\u7684JS\u201d，\u66f4\u8f7b\u91cf\u3002<\/li>\n<\/ul>\n

                \u95ee\u98982：\u670d\u52a1\u5668\u7ec4\u4ef6\u53ef\u4ee5\u5904\u7406\u7528\u6237\u4ea4\u4e92\u5417？<\/h4>\n

                \u89e3\u7b54：\u4e0d\u80fd！\u670d\u52a1\u5668\u7ec4\u4ef6\u6ca1\u6709\u6d4f\u89c8\u5668\u73af\u5883（\u5982window\u3001document），\u65e0\u6cd5\u5904\u7406\u70b9\u51fb\u3001\u8f93\u5165\u7b49\u4ea4\u4e92\u3002\u4ea4\u4e92\u903b\u8f91\u5fc5\u987b\u653e\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6（\u7528'use client'\u6807\u8bb0）\u4e2d\u3002<\/p>\n

                \u793a\u4f8b：<\/p>\n

                \/\/ \u670d\u52a1\u5668\u7ec4\u4ef6（\u65e0\u4ea4\u4e92）<\/span>
                \nfunction<\/span> ServerComponent<\/span>(<\/span>)<\/span> {<\/span>
                \n return<\/span> <<\/span>div><\/span>\u8fd9\u662f\u670d\u52a1\u5668\u6e32\u67d3\u7684\u5185\u5bb9<<\/span>\/<\/span>div><\/span>;<\/span>
                \n}<\/span><\/p>\n

                \/\/ \u5ba2\u6237\u7aef\u7ec4\u4ef6（\u5904\u7406\u4ea4\u4e92）<\/span>
                \n'use client'<\/span>;<\/span>
                \nfunction<\/span> ClientButton<\/span>(<\/span>)<\/span> {<\/span>
                \n const<\/span> [<\/span>count,<\/span> setCount]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
                \n return<\/span> <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setCount<\/span>(<\/span>c<\/span> =><\/span> c +<\/span> 1<\/span>)<\/span>}<\/span>><\/span>\u70b9\u51fb\u6b21\u6570：{<\/span>count}<\/span><<\/span>\/<\/span>button><\/span>;<\/span>
                \n}<\/span><\/p>\n

                \u95ee\u98983：\u670d\u52a1\u5668\u7ec4\u4ef6\u5982\u4f55\u8bbf\u95ee\u540e\u7aef\u8d44\u6e90？<\/h4>\n

                \u89e3\u7b54：\u670d\u52a1\u5668\u7ec4\u4ef6\u8fd0\u884c\u5728\u670d\u52a1\u5668\u7aef，\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u6570\u636e\u5e93\u3001\u8c03\u7528\u5185\u90e8API（\u65e0\u9700\u901a\u8fc7HTTP\u63a5\u53e3）\u3002\u4f8b\u5982：<\/p>\n

                \/\/ \u670d\u52a1\u5668\u7ec4\u4ef6\u76f4\u63a5\u8fde\u63a5\u6570\u636e\u5e93（\u9700\u540e\u7aef\u73af\u5883\u652f\u6301）<\/span>
                \nasync<\/span> function<\/span> UserProfile<\/span>(<\/span>{<\/span> userId }<\/span><\/span>)<\/span> {<\/span>
                \n \/\/ \u76f4\u63a5\u4f7f\u7528\u6570\u636e\u5e93\u5ba2\u6237\u7aef（\u5982Prisma）<\/span>
                \n const<\/span> user =<\/span> await<\/span> prisma.<\/span>user.<\/span>findUnique<\/span>(<\/span>{<\/span> where<\/span>:<\/span> {<\/span> id<\/span>:<\/span> userId }<\/span> }<\/span>)<\/span>;<\/span>
                \n return<\/span> <<\/span>div><\/span>\u7528\u6237\u59d3\u540d：{<\/span>user.<\/span>name}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>
                \n}<\/span><\/p>\n

                \u95ee\u98984：\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u5982\u4f55？\u9700\u8981\u989d\u5916\u914d\u7f6e\u5417？<\/h4>\n

                \u89e3\u7b54：<\/p>\n

                  \n
                • \u6d4f\u89c8\u5668\u652f\u6301：Server Components\u4f9d\u8d56\u73b0\u4ee3\u6d4f\u89c8\u5668（Chrome 80+\u3001Firefox 78+），\u4f46\u8fd4\u56de\u7684\u662f\u7eafHTML，\u65e7\u6d4f\u89c8\u5668\u4e5f\u80fd\u6b63\u5e38\u663e\u793a\u5185\u5bb9（\u53ea\u662f\u4ea4\u4e92\u7ec4\u4ef6\u53ef\u80fd\u65e0\u6cd5\u5de5\u4f5c）；<\/li>\n
                • \u914d\u7f6e\u8981\u6c42：\u9700\u8981\u4f7f\u7528React 18+\u548c\u652f\u6301Server Components\u7684\u6846\u67b6（\u5982Next.js 13+），\u901a\u8fc7app\u76ee\u5f55\u7ed3\u6784\u533a\u5206\u670d\u52a1\u5668\/\u5ba2\u6237\u7aef\u7ec4\u4ef6\u3002<\/li>\n<\/ul>\n

                  \u7ed3\u5c3e：Server Components，\u524d\u7aef\u6027\u80fd\u7684"\u65b0\u57fa\u5efa"<\/h3>\n

                  React\u670d\u52a1\u5668\u7ec4\u4ef6\u4e0d\u662f\u201c\u98a0\u8986\u524d\u7aef\u201d，\u800c\u662f\u201c\u91cd\u65b0\u5b9a\u4e49\u524d\u540e\u7aef\u5206\u5de5\u201d\u2014\u2014\u8ba9\u670d\u52a1\u5668\u505a\u64c5\u957f\u7684\u4e8b（\u6570\u636e\u3001\u8ba1\u7b97），\u5ba2\u6237\u7aef\u505a\u64c5\u957f\u7684\u4e8b（\u4ea4\u4e92\u3001\u52a8\u753b）\u3002\u5b83\u80fd\u8ba9\u4f60\u7684\u5e94\u7528\u201c\u5feb\u5982\u95ea\u7535\u201d，\u8fd8\u80fd\u964d\u4f4e\u5f00\u53d1\u590d\u6742\u5ea6，\u7edd\u5bf9\u662f\u672a\u6765\u524d\u7aef\u7684\u201c\u5fc5\u5b66\u6280\u80fd\u201d～<\/p>\n

                  \u4e0b\u6b21\u9047\u5230\u201c\u9996\u5c4f\u52a0\u8f7d\u6162\u201d\u6216\u201cSEO\u96be\u641e\u201d\u7684\u95ee\u9898，\u522b\u5fd8\u4e86Server Components！\u5982\u679c\u8fd9\u7bc7\u6587\u7ae0\u5e2e\u4f60\u7406\u6e05\u4e86\u601d\u8def，\u8bb0\u5f97\u70b9\u4e2a\u8d5e，\u54b1\u4eec\u4e0b\u671f，\u4e0d\u89c1\u4e0d\u6563！<\/p>\n","protected":false},"excerpt":{"rendered":"

                  \u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u524d\u7aef\u5c0f\u4f19\u4f34\u4eec\uff0c\u6709\u6ca1\u6709\u88ab\u201c\u9996\u5c4f\u52a0\u8f7d10\u79d2\u201d\u7684\u7528\u6237\u6295\u8bc9\u641e\u5230\u5931\u7720\uff1f\u6216\u8005\u4e3a\u4e86\u4f18\u5316SEO\uff0c\u5728SSR\uff08\u670d\u52a1\u7aef\u6e32\u67d3\uff09\u548cCSR\uff08\u5ba2\u6237\u7aef\u6e32\u67d3\uff09\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3\uff1f\u4eca\u5929\u54b1\u4eec\u804a\u70b9\u201c\u524d\u7aef\u65b0\u57fa\u5efa\u201d\u2014\u2014React\u7684**\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09**\uff0c\u5b83\u80fd\u8ba9\u4f60\u7684\u5e94\u7528\u5feb\u5230\u98de\u8d77\uff0c\u8fd8\u80fd\u5927\u5e45\u964d\u4f4e\u5f00\u53d1\u590d\u6742\u5ea6\uff01\u770b\u5b8c\u8fd9\u7bc7\uff0c\u4f60\u4e0d\u4ec5\u80fd\u641e\u61c2\u5b83\u662f\u5565\uff0c\u8fd8\u80fd\u548c\u9762\u8bd5\u5b98\u5520\u660e\u767d\u5b83\u7684\u201c\u5feb\u201d\u4ece\u54ea\u6765\uff5e<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[524,3695,43,1654],"topic":[],"class_list":["post-40430","post","type-post","status-publish","format-standard","hentry","category-server","tag-react-js","tag-3695","tag-43","tag-1654"],"yoast_head":"\nReact \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/40430.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u524d\u7aef\u5c0f\u4f19\u4f34\u4eec\uff0c\u6709\u6ca1\u6709\u88ab\u201c\u9996\u5c4f\u52a0\u8f7d10\u79d2\u201d\u7684\u7528\u6237\u6295\u8bc9\u641e\u5230\u5931\u7720\uff1f\u6216\u8005\u4e3a\u4e86\u4f18\u5316SEO\uff0c\u5728SSR\uff08\u670d\u52a1\u7aef\u6e32\u67d3\uff09\u548cCSR\uff08\u5ba2\u6237\u7aef\u6e32\u67d3\uff09\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3\uff1f\u4eca\u5929\u54b1\u4eec\u804a\u70b9\u201c\u524d\u7aef\u65b0\u57fa\u5efa\u201d\u2014\u2014React\u7684**\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09**\uff0c\u5b83\u80fd\u8ba9\u4f60\u7684\u5e94\u7528\u5feb\u5230\u98de\u8d77\uff0c\u8fd8\u80fd\u5927\u5e45\u964d\u4f4e\u5f00\u53d1\u590d\u6742\u5ea6\uff01\u770b\u5b8c\u8fd9\u7bc7\uff0c\u4f60\u4e0d\u4ec5\u80fd\u641e\u61c2\u5b83\u662f\u5565\uff0c\u8fd8\u80fd\u548c\u9762\u8bd5\u5b98\u5520\u660e\u767d\u5b83\u7684\u201c\u5feb\u201d\u4ece\u54ea\u6765\uff5e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/40430.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-28T23:13:05+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/40430.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/40430.html\",\"name\":\"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-05-28T23:13:05+00:00\",\"dateModified\":\"2025-05-28T23:13:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/40430.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/40430.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/40430.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/40430.html","og_locale":"zh_CN","og_type":"article","og_title":"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb900\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u524d\u7aef\u5c0f\u4f19\u4f34\u4eec\uff0c\u6709\u6ca1\u6709\u88ab\u201c\u9996\u5c4f\u52a0\u8f7d10\u79d2\u201d\u7684\u7528\u6237\u6295\u8bc9\u641e\u5230\u5931\u7720\uff1f\u6216\u8005\u4e3a\u4e86\u4f18\u5316SEO\uff0c\u5728SSR\uff08\u670d\u52a1\u7aef\u6e32\u67d3\uff09\u548cCSR\uff08\u5ba2\u6237\u7aef\u6e32\u67d3\uff09\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3\uff1f\u4eca\u5929\u54b1\u4eec\u804a\u70b9\u201c\u524d\u7aef\u65b0\u57fa\u5efa\u201d\u2014\u2014React\u7684**\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09**\uff0c\u5b83\u80fd\u8ba9\u4f60\u7684\u5e94\u7528\u5feb\u5230\u98de\u8d77\uff0c\u8fd8\u80fd\u5927\u5e45\u964d\u4f4e\u5f00\u53d1\u590d\u6742\u5ea6\uff01\u770b\u5b8c\u8fd9\u7bc7\uff0c\u4f60\u4e0d\u4ec5\u80fd\u641e\u61c2\u5b83\u662f\u5565\uff0c\u8fd8\u80fd\u548c\u9762\u8bd5\u5b98\u5520\u660e\u767d\u5b83\u7684\u201c\u5feb\u201d\u4ece\u54ea\u6765\uff5e","og_url":"https:\/\/www.wsisp.com\/helps\/40430.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-05-28T23:13:05+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/40430.html","url":"https:\/\/www.wsisp.com\/helps\/40430.html","name":"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-05-28T23:13:05+00:00","dateModified":"2025-05-28T23:13:05+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/40430.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/40430.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/40430.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"React \u7684\u670d\u52a1\u5668\u7ec4\u4ef6\uff08Server Components\uff09\u662f\u4ec0\u4e48\uff1f\u5b83\u5bf9\u5e94\u7528\u6027\u80fd\u6709\u4ec0\u4e48\u63d0\u5347\uff1f"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/40430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=40430"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/40430\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=40430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=40430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=40430"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=40430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}