SvelteKit が Public Beta になったので、いつもの病気を発症してブログ環境を置き換えてみた。
/api/posts.json.ts, /api/posts/[slug].json.ts で実装index.svelte, posts/[slug].svelte ファイルの <script context="module"> の中で上記 API を fetch<script> の中でクライアントサイド用に加工sveltekit は adapter によって netlify 用、vercel 用、シンプル nodejs 用とビルド時の出力を変えられる。
static を使えばサイト全体を static ファイルにしてくれる。
導入したら npm run build で build ディレクトリに static ファイルが吐き出される。
.json.ts という拡張子をつけると .json の endpoint が作れる。
endpoint はサーバサイドでしか実行されない。
get, post, delete など HTTP メソッド名の関数を export しておくと、アクセス時の HTTP メソッドと同名の関数が実行される。
<script context="module"> と loadそのファイル専用の設定を書いたり、load を書いたりする。
load は next で言うところの getStaticProps, getServerSideProps だし、一番近いのは nuxt の asyncData か。
サーバ側では load の結果は JSON stringify されて HTML に埋め込まれる。
クライアント側は埋め込まれた JSON があったらそれ使うのですぐ読み込める。
……というよくある SSR の方式。
https://kit.svelte.dev/docs#anchor-options-sveltekit-prefetch
内部リンクにつけとくと、マウスカーソル当てたり、指が触れた瞬間（離れる前）に、リンク先のコンテンツを先読みしてくれる超クールな機能。
Server Side Rendering のハイドレーションとは、ざっくりいうと「サーバ側がレンダリングした HTML を表示しつつ、クライアント側でも HTML を再レンダリングすることで差を埋める」みたいな話。
「差」として多分いちばん重要なのはイベントハンドラで、こいつが設定されないと「クリックしたら開くはずのメニュー」とかが動かない。
https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ja
TBD
かなりお気に入り。
TypeScript, ESLint, Prettier, Less/SCSS を導入するか聞かれてスタートし、完成したあとは svelte.config.cjs で SSR 切ったりできる。
vue, react 系の新規プロジェクト作成はいろんなのを触ってきたけど、個人的には SvelteKit がベストというか、自分の好みにベストマッチしていた。
endpoint はサーバサイド。
onMount はもちろんクライアントのみ。
それ以外は SSR 有効時は基本両方で動く。
load で使える sveltekit 備え付けの fetch はサバクラ両方で動くので基本これで頑張る形っぽい？
fetch では書きにくい！ みたいなケースもありそうだけど、Next.js みたいに、外部への http 通信は基本 endpoint で proxy してやって、サバクラ両方で動く場所では fetch で endpoint からデータ取ってくるだけという方針でも良さそう。
とにかく軽い。読み込みが一瞬で完了する。
svelte 自体が簡潔なのもあるけど、コード量がすごく少なく感じる。
多分 public beta な今だけ。
バージョン違いでどうにもうまく動かず、github からインストールしようとしてもサブディレクトリなので苦労した。
このプロジェクトでは GitPkg というサービスで無理やりサブディレクトリからインストールしている。
おそらく。
load 内でエラーが起こったときになんにも表示されない。
どうも $error ページにエラーがあるとこうなっちゃうっぽい。
try-catch したり console.log デバッグでなんとかエラーを特定して実装した。