Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
サーバーサイドレンダリング (Server-side rendering, SSR) とはサーバーで HTML を生成するプロセスのことで、SvelteKit はデフォルトでこれを行っています。パフォーマンスとレジリエンスのために重要であり、検索エンジン最適化 (SEO) にも非常に有益です。なぜなら、一部の検索エンジンではブラウザ上で JavaScript によってレンダリングされたコンテンツをインデックスできますが、その頻度は少なく、信頼性は低いためです。
一方で、サーバーでレンダリング できない コンポーネントもあります。例えば、window
のようなブラウザのグローバルにアクセスできることを想定している場合などです。もし可能なら、コンポーネントを変更してサーバーでもレンダリングできるようにしたほうが良いですが、それができない場合は、SSR を無効にすることができます。
src/routes/+page.server
export const ssr = false;
最上位(root) の
+layout.server.js
でssr
をfalse
にすることは、実質的にはアプリ全体をシングルページアプリ (SPA) にすることになります。
1
2
<h1>{window.innerWidth}x{window.innerHeight}</h1>