Nextjs ServerComponent内でアコーディオンをを使用した際の挙動について

[taku10101]

使用した各ライブラリーのバージョン

    "@yamada-ui/react": "^1.3.5",
    "next": "14.2.1",
    "react": "^18",

問題

ServerComponentを使用いた際、アコーディオンの開閉時に若干のラグが生じてしまいます
ClientComponentに変更するとそれらは解消されサイト内のデモ通りスムーズに動きます。
これはSSRの特性上仕方のないことのような気がしましたが、改善の余地はあるものなのでしょうか？

念の為下記にその時使用したコードを記載しておきます。

import { Accordion, AccordionItem, AccordionPanel } from "@yamada-ui/react";

const AccordionComponent = () => {
  return (
    <div>
      <Accordion>
        <AccordionItem label='力を入れてきたことは'>
          <AccordionPanel pt={3} bg={["green.50", "green.100"]}>
            地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem label='ピッコロ大魔王編'>
          <AccordionPanel pt={3} bg={["orange.50", "orange.400"]}>
            天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem label='サイヤ人編'>
          <AccordionPanel pt={3} bg={["blue.50", "blue.100"]}>
            ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
};

export default AccordionComponent;

再現動画

2024-04-22.0.42.39.mov

[taku10101]

すみません。間違えてPollsで投稿してしまいました

[hirotomoyamada]

@taku10101

Accordionは、内部でframer-motionを使用しています。
クライアント側でコンテンツの高さを取得しているため、残念ながらRSCでは取得できず、動画のようにガタつきのあるアニメーションになってしまいます。

しかし、近年CSSの進歩は早く、もしかすると近い将来CSSだけの実装ができれば、RSCの対応はできるでしょう。