← ブログに戻る
サーバーサイドレンダリングの最適化

サーバーサイドレンダリングの最適化

文大昇
ssrnextjssveltekit

ページ遷移アニメーションライブラリはどのように動作するのでしょうか?ネイティブアプリでは、ページ間を移動する際に、どのページにどのエフェクトで移動するかをその都度定義します。router.push(<NextPage />, "slide")のように管理できます。

一部のライブラリでは、このためにルーティングを個別に実装する必要があるかもしれません。コンポーネントを保持する配列があり、遷移エフェクトが発生するたびにスタックのように積み重ねていきます。

しかし、ウェブでは異なる動作が必要です。モダンなウェブフレームワークでは、サーバーサイドレンダリングが必須となっています。そして、各フレームワークは独自に最適化されたルーティングを実装しています。prefetch、preload、dynamic importの効果を得るためには、フレームワークが指定する方法でページを移動する必要があります。

ssgoiはシンプルな設定で、Next.jsのルーティングをそのまま活用できるように設計されています。SvelteKitも同様です。Next.jsのサーバーコンポーネント環境でも問題なく動作します。

ssgoiはウェブページ遷移アニメーションライブラリです。ウェブのために作られ、ウェブ環境に最適化されています。URLが変わりながらもアニメーションが付与される体験をお楽しみください。

demo: https://ssgoi.dev/demo