我々のサイトを

あまりにもずっと前に、Navillusサイトは、2007年に地面から書き直されましたAstro . それ以来、私たちはなぜ私たちがアストロに飛び込んできたのか、どのようにして行ったのか、そして私たちが学んだことに興味を持っていました.私はここで一般的な質問に答えるために最善を尽くします、しかし、我々が何かを逃したならば、遠ざかるのを感じてください!
TLドクター我々のホームページは、より少ない要求(10対21)を作ります、そして、より小さい(77 KB対123 KB)、そして、我々のJavaScriptフットプリントは31 KBからわずか2 KBまで下がりました!

なぜ我々はアストロに移動
ウェブの大部分は静的コンテンツです、そして、我々のサイトは異なりません.クライアント側の双方向性、モバイルメニューとテーマのトグルのいずれかのタイプを持つ2つのコンポーネントがあります.あなたが期待するように、これらのコンポーネントは、正確に複雑ではなく、JavaScriptのいくつかの行だけで構築することができます.

Sveletkitからの移行
当社のサイトは、以前に書かれていたSvelteKit そして、特にベータと考えられていたので、私たちはSveletkitととても幸せでした.事実は、しかし、SveltekitのようなWebAppフレームワークです.Next.js , and Nuxt.js 主に静的サイトではなく高度にインタラクティブなフロントエンドを構築することに焦点を当てている.
私は間違って取得しないでください、SveletKitは私のリストの上部に大きな、ダイナミックなwebappsを構築し、その場所を獲得した.しかし、ほとんどのプロジェクトについては、私は喜んでアストロと一緒に構築されますSvelte 必要なコンポーネント.

何が変わったのですか.
驚くほどではなく、そんなに!私たちが持っていたsvelteのコンポーネントのほとんどはレイアウト目的のためだけに使用されました、そして、Svelteは普通の古いHTML/CSS/JSと密接に密接に結びつくので、Svelteコンポーネントのほとんどをアストロコンポーネントに変換するのは些細でした.
主な変更は、要素の非表示/表示やデータの配列をループするような条件付きレンダリング構文に関連します.例えば、
Svelteで.

{#if open}
   ...
{/if}

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

…になる.

{open && (
  ...
)}

{items.map((item) => (
  <li>{item}</li>
))}

Svelteから来て、これは私の趣味のために少しあまり反応しない感じです、しかし、テンプレートでJavaScript権利を使うことができるのは本当に便利です.私は実際にこれを試みていないsort() or filter() あなたのテンプレートの配列右!

何がうまくいかなかったのですか.
何もない!私たちのサイトは、静的なホームページのコンテンツやブログよりも少しストレートで、これらの本当に静的サイトジェネレータのテーブルステークスです.
モバイルメニューとテーマトグルを介してポートに時間が来たとき、我々は最初にSvelteのコンポーネントを使用することを決めた.これは、必要に応じてコンポーネントのフレームワークを放棄することなく、Astro、静的サイト生成の本当の利点です.我々は最近、これらのコンポーネントを同様にAstroに移動しました.

サーバのルートは?
このサイトはSveltekitのものを使用していませんでしたserver endpoints , しかし、アストロが現在静的サイト生成に集中しているのを覚えておくことは重要です.
アストロはどんな種類のサーバも構築しませんが、Netlify , 彼らFunctions 製品は、Astroのための大きな合うものです.購読するRSS feed それで、あなたは我々のサイトのものを移すためにNetlify機能を加えている次のポストを逃しませんweb mentions !

私たちは何を学びましたか.
アストロとの作業は爽快に簡単だった.反応、Svelte、Vue、等の近代的なWeb開発の場所がありますが、それは常に必要ではないことを覚えておくことが重要です.私たちのテーマのトグルは、ドキュメントの要素からクラスを追加/削除以上の何もしない、それは本当に別の依存関係を保証するのに十分ですか?
アストロはまだベータ版です!フレームワークは非常に高速に移動しているchangelog これまでのところ13月のリリースを示しています.いくつかのAPIには小さな変更があり、コレクションAPIはrefactor , 場合は、時折、いくつかの更新プログラムを最新のアストロリリースに追いつくためにする必要があります驚かないでください.

結論
これは簡単に右のソフトウェアプロジェクトの単純なソリューションをスキップすることです.フル機能のフレームワークは、動的なWebアプリケーションを起動するときに巨大な時間の節約することができますが、必要なすべての場合は、単純な静的に構築されたサイトでは、アストロによって供給されただけで良いかもしれないマーケティングサイトです!
我々がここで逃したより多くの質問をしてください?手を伸ばして!