SvelteKit・Svelte でハマった(困った)ところ/nextbeattechbar-20221027-2

2022年10月27日に開催された「Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会」にて発表した資料です。

https://nextbeat.connpass.com/event/262586/

Transcript

1. Copyright © nextbeat All Rights Reserved SvelteKit / Svelte でハマった(困った)ところ Copyright © nextbeat All Rights Reserved ネクストビート 阿部雅哉
2. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 2 自己紹介 株式会社ネクストビート CTO 阿部雅哉 2013/4 ~ DeNA • ゲーム向けのBaaS開発 • 認証・認可基盤 (OIDC, OAuth2) 2019/1 ~ ネクストビート • EM & おもてなしHR 開発リード • 社内共通ライブラリ・ API 開発 • 2022年1月よりCTO
3. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 3 目次 • SvelteKit 採用プロダクトについて • SvelteKit / Svelte でハマった（困った）こと • まとめ
4. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 4 保育士バンク！での SvelteKit 採用 一部プロダクトで 技術構成の刷新プロジェクトを進行中
5. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 5 現サービス構成 基本的に全社で下記言語で開発 • PlayFramework(Scala) • Angular ネイティブアプリは Swift & Kotlin 非同期・バッチ処理は Lambda を利用 (Scala で開発し、sbt プラグインや独自 の機構で CI/CD 管理)
6. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 6 刷新後のサービス構成（像） 開発言語を TypeScript で統一 NestJS : APIサーバ SvelteKit : Webサーバ ネイティブアプリは Ionic + Svelte による クロスプラットフォーム開発 Lambda は Serverless Framework を利用 共通ライブラリも含め monorepo 構成 + turborepo を利用し開発中 刷新の背景・詳細な構成はまた後日
7. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 7 改めて... SvelteKit / Svelte でハマった（困った）こと
8. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 8 ハマったこと（困ったこと） • script タグを body に埋め込めない...？ • ページネーション時に画像が更新されない ...? • load 関数の fetch の挙動が...?
9. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 9 script タグを body に埋め込めない？ 分析で利用するタグには body 内に配置が必要。 愚直に script タグを記載すると、下記のようにエラーとなる。 (Svelte のコンパイラが 2つ目の <script> も Svelte の script 部と判断するのでエラーとなってしまう )
10. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 10 script タグを body に埋め込めない？ この場合は svelte:element により script タグを埋め込むことが可能 もしくは div 等で囲う
11. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 11 ハマったこと（困ったこと） • script タグを body に埋め込めない...？ • ページネーション時に画像が更新されない ...? • load 関数の fetch の挙動が...?
12. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 12 ページネーション時に画像が更新されない ...？ ページネーションによる遷移をする求人一覧 (あるべき姿) 当然遷移により、表示求人の内容が更新 2ページ目に遷移
13. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 13 ページネーション時に画像が更新されない ...？ あれ、、画像変わってない？？ 2ページ目に遷移 svelte-lazy-image package で Lazy Load となる 画像が変更されない現象に遭遇
14. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 14 ページネーション時に画像が更新されない ...？ 該当箇所のコード
15. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 15 ページネーション時に画像が更新されない ...？ Svelte でページネーションによる DOM 更新時に data-src のみ変更 & src を削除する指示がないので、 Lazy Load により追加された src は削除されずにそのまま残る。 原因 1ページ目レンダリング & Lazy Load による画像表示 2ページ目に遷移 . data-src のみ更新され、画像が更新されない
16. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 16 ページネーション時に画像が更新されない ...？ isLazy の場合は src を消すように指示 ではこれで OK ? use:lazyImage 内の IntersectionObserver は発火後に unsubscribe となるので、 ページネーション遷移時には Lazy Load が起きず画像が表示されない
17. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 17 ページネーション時に画像が更新されない ...？ key ブロックを利用し、再レンダリングさせ action も再実行させる 解決策
18. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 18 ハマったこと（困ったこと） • script タグを body に埋め込めない...？ • ページネーション時に画像が更新されない ...? • load 関数の fetch の挙動が...?
19. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 19 load 関数の fetch の挙動が...? 各ページでは +page.server.ts 内で SvelteKit が提供する fetch を利用し、内部通信経由で API サーバからデータを取得 • API Client の実装 ◦ ベースURL を https://www.hoikushibank.com で固定 ◦ fetch を差し替え可能 • Server での API 実行 ◦ server hooks の handleFetch で ベースURL を http://hb-api.internal に書き換える データ取得時の構成
20. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 20 load 関数の fetch の挙動が...? ◯ SvelteKit が提供する load関数の fetch 仕様 • リクエスト先が同一オリジン or サブドメインであれば Credentail (Cookie) 等を渡してくれる • リクエスト先とオリジンが異なる際は CORS をシミュレート ◯ 前述のデータ取得構成では下記問題が発生 オリジンと APIリクエスト先が異なるため 1. Cookie が API サーバに渡されない 2. CORS 制約にて 403 エラー 3. API が連続する際に、途中でセットされた Cookie が後続の APIリクエストに含まれない 実は 3 を除いて hooks の externalFetch (1.0.0-next.468 以前) では問題なかった。 fetch の仕様と構成上起きる課題
21. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 21 load 関数の fetch の挙動が...? Cookie が API に渡されない • handleFetch にて event.request.headers から Cookie を取得し fetch に渡せば解決 CORS 制約にて 403 エラー • SvelteKit 側で対処しようがないので、 API側 で CORS 許可の対応必要 API が連続する際に、途中でセットされた Cookie が後続の APIリクエストに含まれない • （現状）SvelteKit の fetch を利用する上では対応策なし 解決策 これはよし 内部通信で CORS 設定... どうしようもない
22. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 22 load 関数の fetch の挙動が...? 自作の load 関数用 fetch を作りました • 内部通信時の挙動 ◦ CORS を考慮しない ◦ request の Cookie を pass through ◦ Set-Cookie の Cookie を後続のリクエストに伝搬 ◦ (API の Set-Cookie を merge し、SvelteKit のレスポンスに含める ) • それ以外 ◦ 単なる fetch (現状この用途はない ) event.locals に fetch を代入し、各ページの +page.server.ts でその fetch を使って API call を実施 というわけで我々の解決策としては ...
23. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 23 SvelteKit / Svelte でハマった（困った）点 script タグを body に埋め込みたい • svelte:element を使うか div で囲う ページネーション時に画像が更新されない ...? • key ブロックによるコンポーネントの再更新を意識 (アニメーション等もそう ) 内部通信時の SvelteKit の load 関数における CORS, Cookie 伝搬 • 自作で fetch の wrapper を作りました
24. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 24 最後に 保育士バンク！が基本的な Webアプリケーションであることと、 Svelte / SvelteKit がチュートリアル & ドキュメントが豊富なので、 実際に使っていてハマるというのは少なかったかなと思います。 ただ SvelteKit の version up が早いので、 その追従や version up 後に起きるバグ等の調査や Issue 確認の方が骨が折れます。
25. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 25 最後に 保育士バンク！が基本的な Webアプリケーションであることと、 Svelte / SvelteKit がチュートリアル & ドキュメントが豊富なので、 実際に使っていてハマるというのは少なかったかなと思います。 ただ SvelteKit の version up が早いので、 その追従や version up 後に起きるバグ等の調査や Issue 確認の方が骨が折れます。
26. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 26 最後に ご清聴ありがとうございました！