Next.js App Router中Server Component资源占用高于Client Component问题咨询

当页面作为Server Component时，资源占用和请求数反而高于添加"use client"改为Client Component的情况：

• Server Component模式：发送237次请求，占用99MB资源
• Client Component模式：仅发送174次请求，占用66.7MB资源

以下是页面代码：

import SectionHero from '@/app/(main)/(landing)/(components)/SectionHero'; // server component
import SectionPlans from '@/app/(main)/(landing)/(components)/SectionPlans'; // client component
import SectionReferences from '@/app/(main)/(landing)/(components)/SectionReferences'; //server component
import MetaHead from '@/components/MetaHead'; //server component
import PageLoadingWrapper from '@/components/PageLoadingWrapper'; //client component
import SectionWrapper from '@/components/SectionWrapper'; // server component

import SectionBlog from './(components)/SectionBlog'; //client component
import SectionFeatures from './(components)/SectionFeatures'; //server component
import LandingContent from './(components)/SectionHero/LandingContent'; //server component
import SectionNewsletter from '../../../components/SectionNewsletter'; //client component
import StyledLanding from '../styles'; //client component

export default function Landing() {
  return (
    <>
      <MetaHead></MetaHead>
      <PageLoadingWrapper>
        <StyledLanding>
          <SectionWrapper span={24} color={'light'}>
            <SectionHero />
          </SectionWrapper>

          <SectionWrapper span={24} color={'light'}>
            <LandingContent />
          </SectionWrapper>

          <SectionWrapper span={24} color={'light'}>
            <SectionFeatures />
          </SectionWrapper>

          <SectionWrapper span={24} color={'light'}>
            <SectionPlans />
          </SectionWrapper>

          <SectionWrapper span={24} color={'light'}>
            <SectionReferences />
          </SectionWrapper>

          <SectionWrapper span={24} color={'light'}>
            <SectionBlog />
          </SectionWrapper>

          <SectionWrapper span={24} color={'lightGrey'}>
            <SectionNewsletter />
          </SectionWrapper>
        </StyledLanding>
      </PageLoadingWrapper>
    </>
  );
}

项目依赖：

"dependencies": {
  "@ant-design/colors": "^7.0.2",
  "@ant-design/cssinjs": "^1.20.0",
  "@ant-design/icons": "^5.3.6",
  "@ant-design/nextjs-registry": "^1.0.0",
  "@commitlint/config-conventional": "^18.6.3",
  "@commitlint/cz-commitlint": "^18.6.1",
  "@next/bundle-analyzer": "^14.2.3",
  "@sanity/block-content-to-react": "^3.0.0",
  "@sanity/client": "^6.15.20",
  "@typescript-eslint/eslint-plugin": "^6.21.0",
  "antd": "^5.16.4",
  "axios": "^1.6.8",
  "commitizen": "^4.3.0",
  "commitlint": "^18.6.1",
  "cross-env": "^7.0.3",
  "crypto-js": "^4.2.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-import-resolver-typescript": "^3.6.1",
  "eslint-plugin-jsx-a11y": "^6.8.0",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.6",
  "framer-motion": "^10.18.0",
  "hamburger-react": "^2.5.0",
  "humps": "^2.0.1",
  "husky": "^8.0.3",
  "jwt-decode": "^3.1.2",
  "lint-staged": "^15.2.2",
  "next": "14.0.4",
  "next-pwa": "^5.6.0",
  "next-sanity": "^9.0.10",
  "next-sitemap": "^4.2.3",
  "polished": "^4.3.1",
  "prettier": "^3.2.5",
  "react": "^18.2.0",
  "react-country-flag": "^3.1.0",
  "react-dom": "^18.2.0",
  "react-markdown": "^9.0.1",
  "remark-gfm": "^4.0.0",
  "server-only": "^0.0.1",
  "sharp": "^0.33.3",
  "styled-components": "^6.1.8",
  "suspend-react": "^0.1.3",
  "swiper": "^11.1.1",
  "swr": "^2.2.5",
  "usehooks-ts": "^2.16.0"
}

这种情况为何会发生？我是否对RSC存在认知遗漏？

内容的提问来源于stack exchange，提问作者hasatserinkan