Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Astro の pros / cons

Astro の pros / cons

Vercel * Astro を使った開発を行い気づいた点を共有します。

hashiba daiki

April 21, 2023
Tweet

More Decks by hashiba daiki

Other Decks in Programming

Transcript

  1. 自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -

    Web フロントエンドエンジニア - 大阪出身→香川在住 - (世界一)可愛い娘がいます
  2. 概要(公式引用) - Astro is the all-in-one web framework designed for

    speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries. - zero-JS - Content-focused https://astro.build/
  3. - blog … all pre-renderであれば - portfolio … all pre-renderであれば

    - corporate … ぎりぎり - EC … 🥺 できる範囲?
  4. demo(blog) / : Top page … pre-render /search : 検索ページ

    … SSR /blog/[blogId] : ブログ詳細 … pre-render
  5. 実際にやったこと - HTML / CSSが静的なassetとして欲しい - JSを不用意に吐き出さない - human readableなコードが欲しい

    - previewを見せる必要がある - 非エンジニアでも確認できる環境 → Vercel * Astro
  6. つらかったこと② script, style tagが独特 - 暗黙的にglobalかinlineかが決まっている - コンポーネントの出し分けなどで中々意図した挙動にさせずらい - <script>タグにtype="module

    "またはsrc以外の属性を追加すると、 Astroのデフォルトのバンドル動作が無効になり、is:inlineディレクティ ブがあるかのようにタグが扱われる