Vike

こちらは、日本語版のVikeのドキュメントです。
誤訳・表記ゆれ・未修正箇所などありましたらこちらのIssueにお願いします。

V1デザインがリリースされました。マイグレーションガイドをご覧ください。

Vite-plugin-ssrはVikeへと名称が変更されました。マイグレーションガイドをご覧ください。

🔧 コントロール

お好みのUI framework （React、 Vue、 Svelte、 Solid、 ...）と お好みのツール（フロントエンドライブラリ、 web技術、デプロイ環境、 Vite プラグイン、 ...）を使うことができます。

Vikeを使えば、手動でツールを統合し、アーキテクチャをコントロールし続けることができます。

Vikeでは、ページのレンダリング方法をコントロールできます：

// /pages/about/+Page.js
// 環境：ブラウザとサーバー
 
export { Page }
 
// Vikeはファイルシステムルーティングを使用します。 ファイル`/pages/about/+Page.js` はURLの `/about`となります。
 
// `Page` 何にでもなることができます。 — 一般的にはReact/Vue/Svelte/... のコンポーネントになります。
function Page() {
  return (
    <>
      <h1>About</h1>
      <p>This is our first Vike app.</p>
    </>
  )
}

// /renderer/+onRenderHtml.js
// 環境：サーバー
 
export { onRenderHtml }
 
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
// これはどのようなUIフレームワークでも構いません。 (React, Vue, Svelte, ...)
import { renderToHtml } from 'my-favorite-ui-framework'
 
// `Page` がどのようにHTMLへレンダリングされるかコントロールできます。
async function onRenderHtml({ Page }) {
  const pageHtml = await renderToHtml(Page)
  const title = 'My first Vike app'
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}

// /renderer/+onRenderClient.js
// 環境：ブラウザ
 
export { onRenderClient }
 
import { hydrateDom } from 'my-favorite-ui-framework'
 
// `Page`がどのようにハイドレートされるかコントロールできます。
async function onRenderClient({ Page }) {
  await hydrateDom(Page)
}

このレベルのコントロールは、どのようなツールでも使用・統合できることを意味します。

📦 ゼロコンフィグ

Vikeは重要なところだけをコントロールできます。

それ以外のすべては、何も設定することなく機能します。

💫 シンプル

Vikeでは、手動でツールを統合します。そのため作業は増えますが、根本的にはシンプルで安定した基盤を構築することができます。

VikeとあなたのUI framework （React/Vue/...）が混合されないことで、アプリに関する推論が簡単になります。

簡単ではないが、よりシンプル

Vikeでは、自分でツールを統合します。これは通常、より多くの作業を意味し、簡単ではありません。

しかし、Next.js/Nuxtのようなフレームワークのブラックボックス的な性質は制限的で、もろい回避策を必要とします。その結果、フレームワークと戦って時間を浪費することになります。

対照的に、Vikeは透明です。邪魔にならず、ツールの統合は単にツールの公式インストールガイドに従うだけで大丈夫です。

一言で言えば、Vikeは簡単ではないが、よりシンプルです。

安定した基盤

フレームワークは常にエコシステムに対応する必要がありますが、「1つのことをうまくやる」ツールはすぐに安定します。

実際、Vikeはすでに安定しています。変更を加えるのはVikeのデザインを改善するためだけで、統合は将来も機能し続けることが期待できます。

クリーンカット

VikeとあなたのUIフレームワーク（React/Vue/...）は混同されません。これにより、アプリの推論がより簡単になります。

楽しい

最後になりましたが、手作業での統合は楽しく、洞察に富んでいます！（フレームワークと戦うのは不要で厄介ですが）

本格的

ファイルシステムルーティング、データフェッチ、プリレンダリング、レイアウト、HMR、i18n、リンクプリフェッチ、HTMLストリーミング。

クライアントルーティング （高速なページナビゲーション）またはサーバールーティング （シンプルなアーキテクチャ）。

各ページはSSR、SPA、MPA、SSG、HTML-onlyの異なるモードでレンダリングできます。

高速なHMR

とても高速なHMR。powered by Vite

HMRは、Viteの斬新なlazy-transpilingのおかげで、スケールを拡大しても高速を維持します。

ルーティング

ページは自動的にルーティングされます：

ファイル                      URL
pages/index/+Page.js         /
pages/about/+Page.js         /about
pages/movie/@id/+Page.js     /movie/1, /movie/2, /movie/3, ...

いわゆる Route Strings や Route Functions も使えます。

// Route String
export default '/movie/@id'
 
// Route Function — より柔軟
export default pageContext => pageContext.urlPathname === '/admin' && pageContext.isAdmin

どちらかを選択可能：

より高速なページナビゲーションのためのクライアントルーティング。（ページナビゲーション時にDOMの変異が発生します。）
よりシンプルなアプリのアーキテクチャのためのサーバールーティング。（ページナビゲーション時にHTMLをフルリロード）

レンダリングモード (SSR, SPA, SSG, HTML-only)

各ページで、以下のいずれかを選択できます：

SSR: ページのHTMLはリクエスト時にレンダリングされます。
SSG: ページのHTMLはビルド時にプリレンダリングされます。
SPA: ページはHTMLにレンダリングされません。ブラウザで読み込まれ、レンダリングされるだけです。
HTML-only: ページはHTMLのみにレンダリングされ、ブラウザサイドのJavaScriptはゼロまたは最小限になります。

例えば、管理画面をSPAとしてレンダリングする一方で、マーケティングページをHTMLのみにレンダリングし、ブラウザ側のJavaScriptをゼロにすることができます。

このウェブサイトhttps://vike.devはHTMLのみで、数KBのJavaScript（このページの折りたたみ可能なLEARN MOREセクションなど、わずかなインタラクティブ機能を実装している）しか読み込んでいません。

🌍 どこにでもデプロイ

Vercel Serverless/Edge/ISR、Cloudflare Workers、AWS EC2/Lambda、Netlify Functions/Edge、Firebase、Google Cloudなど、どこにでもデプロイできます。

アプリをプリレンダリングし、任意の静的ホスト（Netlify、GitHub Pages、Cloudflare Pagesなど）にデプロイできます。

Cloudflare Workersの小規模要件にぴったりです。

単なるミドルウェア

サーバーから見れば、Vikeは単なるミドルウェアです：

// renderPage()はNode.jsに依存せず、どのJavaScript環境でも使用できます：
// Node.js, AWS, Cloudflare, Vercel, Deno, Bun, Lagon, ...
import { renderPage } from 'vike/server'
 
// 任意のサーバー: Express.js, Cloudflare Worker, AWS Lambda Function, Fastify, Hono, Nitro, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    if (!pageContext.httpResponse) return null
    // `body` is the HTML of the page with a route matching pageContextInit.urlOriginal
    const { body, statusCode, headers } = pageContext.httpResponse
    const response = { body, statusCode, headers }
    return response
  }
})

任意のサーバに renderPage() を埋め込むことができます。

あるいは、renderPage()を使用する代わりに、pre-render あなたのページを作成し、本番サーバーの必要性をなくすことができます（そして、代わりにstatic host にデプロイします）。

プリレンダリング (aka SSG)

アプリをプリレンダリングして本番のNode.jsサーバーを不要にし、任意の静的ホスト（Cloudflare Pages、GitHub Pages、Netlifyなど）にデプロイすることもできます。

$ vite build 
vite building for production...
✓ 42 modules transformed.
vike pre-rendering HTML...
✓ 3 HTML documents pre-rendered.
dist/client/index.html
dist/client/about/index.html
dist/client/404.html