AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

by Ken Miyao

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© DMM.com 問題点：Client / Server Component の切り分け  ➜ Server Component は Client Component から利用する時は  気をつける必要がある    ➜ 正しくBot向け（SSR）にレンダリングされない可能性がある  ➜ SEOに影響がでてしまう可能性がでてくる    ➜ コンポーネントを追加する際に、常にServerかClientかを意識する必要があり、コストがかかる  16

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© DMM.com 問題点：hooksによるClient Component化  ➜ インタラクティブなUIは useState, useEffect を使うため “use client” が  必要になる  ➜ 適当に “use client” を付けると、コンポーネント内全体が Client Component になってしまう     ➜ Server Component で良い部分も無駄に Client Component になってしまう  22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© DMM.com まとめ  ➜ 以下の課題も見えてきたが、 Monorepo化によるディレクトリ  構成・依存関係の整理により複雑にはならなくなった    ➜ “use client” を用いた ClientComponent化や useState, useEffectに関するエラーに気を付ける  ➜ ページでデータ取得をprops の受け渡しが状態管理やReact Provider を活用して複雑性を下げる  上記の問題は改善ができそうなので改善していきたい 💪  27

Slide 28

Slide 28 text