Svelte Kit,最初の”Serverless first”枠組み?

「全体のServerlessなものはかなり良い傾向です、そして、Svelteは現在Serverlessな最初のフレームワークです」
That quote is from Rich Harris , Svelteの作成者.大胆な声明ですが、新しく導入されたSvelte Kitは本当に「Serverless First」ですか?そして、それは何でも意味しますか?そして、もしそうなら、この新しいSvelteはシームレスにNetlifyとVercelのようなServerlessプラットフォームと統合できますか?
ビッグ・ファットSvelte Kit is in early development . ソースコードはまだ公開されていません.スニークピークを取得するには、“次の”バージョンをインストール@1.0.0-next.0 ) スヴェートとそのnew serverless adapters :

npm init svelte@next
npm install -D @sveltejs/adapter-node
npm install -D @sveltejs/adapter-static
npm install -D @sveltejs/adapter-netlify
npm install -D @sveltejs/adapter-vercel

私の調査結果はcompiled code …の助けを得てSokra's source code visualiser .

Serverless最初のアダプターの使用
Serverlessなプラットホームの断片化された風景の中でServerlessな最初になるSvelteの答えは、いわゆるServerlessなアダプターのその導入です.NetlifyとVercelのようなすべてのServerlessなプロバイダーが類似した機能性を提供する間、静的ホスティング、雲機能と構成可能なリダイレクト―彼らはそれぞれ独自のベンダー特有の実装をします.
Svelteをシームレスに実行するために、Svelteはそれぞれのアダプタを提供します.それぞれのアダプタには三つの機能があります.

Svelteのコンパイル済みクライアント側JSバンドルと他の静的ファイルをServerlessなホスティングディレクトリにコピーします.

Svelteのサーバー側JSバンドルと、プラットフォーム固有のレンダリング関数をServerless関数ディレクトリにコピーします.

ServerLess Render機能へのすべてのルートをキャッチして、リダイレクト設定を作成します.

アダプタはプラットフォーム固有の設定ファイルを考慮します.ここからの要点はSvelte adapter for Netlify ( @1.0.0-next.0 ) :

// get netlify configuration, defined by user in netlify.toml:
const netlify_config = toml.parse(fs.readFileSync('netlify.toml', 'utf-8'));
const publish = path.resolve(netlify_config.build.publish);
const functions = path.resolve(netlify_config.build.functions);

// copy static and client files files to static hosting directory:
builder.copy_static_files(publish);
builder.copy_client_files(publish);

// copy the renderer and server files to cloud functions directory:
fs.copyFileSync(path.resolve(__dirname, 'files/render.js'), `${functions}/render/index.js`);
builder.copy_server_files(`${functions}/render`);

// create _redirects file with catch all route to serverless render function:
fs.writeFileSync(`${publish}/_redirects`, '/* /.netlify/functions/render 200');

アダプターがJavaScriptフレームワークの本当のServerlessな統合に向かう方法であると信じている間、私はSvelteがまだ最初にまだServerlessであると思いません.なぜですか

Serverless最初にサーバ論理が必要
静的サイト生成の上のServerlessなレンダリングの楽しみの一部は、動的に着信要求に応じることができます.たとえば、要求がクエリパラメータまたはペイロードを持っている場合は、Svelteアプリケーションでその要求データを使用したいと思います.私はアダプターとsvelteアプリを伝えることができる限りでは、ルートにこのデータを公開しないでください.ここではserverless render function from the Netlify adapter ( @1.0.0-next.0 ) :

exports.handler = async (event) => {
  const { path, httpMethod, headers, queryStringParameters
    // body, // TODO pass this to renderer
    // isBase64Encoded // TODO is this useful?
  } = event;
  const query = new url.URLSearchParams();
  // [...] code to append queryStringParameters to query object

  const rendered = await app.render({
    method: httpMethod, headers, path, query, host: null // TODO
  });

  if (rendered) {
    return {
      isBase64Encoded: false,
      statusCode: rendered.status,
      headers: rendered.headers,
      body: rendered.body
    };
  }
  return { statusCode: 404, body: 'Not found' };
};

による判断TODO コメント、これは明らかに進行中の仕事です.SvelteはすでにSvelteアプリケーションのレンダリング機能にいくつかのリクエストパラメータを渡します.しかし、あなたが見ることができるように、それはペイロードを通過しませんbody and host まだ.意味のないServerlessなアプリのために、svelteはこのラムダハンドラの不足している第2の引数と同様にこれらを渡す必要がありますasync (event, context) ) そして、これらをルートに渡します.加えて、svelteはパラメータ(およびcontext )を正規化する必要がありますベストは、統合された開発者の経験のための異なるServerlessプロバイダー間ですることができます.
Svelteの要求とコンテキストを公開すると、開発者は、アプリケーション内でこれらを処理します.これがどのように見えるかについての良い参考文献は最近追加されました[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) in Next.js . リクエストコンテキストを利用したサーバ側のみのロジックの例を示します.

// example of server-side only logic in a Next.js route:
const { verify, decode } = require('jws')

export async function getServerSideProps(context) {
  const token = context.req.headers.auth

  if (!token || !verify(token, 'HS256', JWT_SECRET)) {
    return {
      redirect: { statusCode: 401, destination: '/login/' }
    }
  }

  const { userId } = decode(token).payload.app_metadata
  const user = await fetchUser({ userId })

  return {
    // will be passed to the page component as props
    props: { user },
  }
}

export default function Page({ user }) {
  // render page with user data
}

サパー-次のsvelteバージョン.ジェイエス preload これはいくぶん似ていますが、サーバー側とクライアント側の両方で実行されます.とコンテキストの多くを公開しません.それがどのように見えるかにかかわらず、新しいSvelteは開発者が本当にServerlessな最初にあるために彼ら自身のサーバーサイド・ロジックを加える若干の方法を導入する必要があります.

Serverless最初の開発モード
NetlifyとVercelを含む無制限のプロバイダは、ローカルの開発をできるだけ生産に近いようにツールを提供するために懸命に働いた.両方netlify dev and vercel dev Serverless関数をサポートします.しかし、Svelte KitはこれらのServerlessなプロバイダーのためにアダプターを提供しますが、彼らはポストビルドステップの形で来ます:

npm run build   # svelte-kit build
npm run adapt   # svelte-kit adapt

これは、Serverlessな最初のアプローチよりむしろ余韻のように感じます.そして、これは開発で私のServerless Svelteアプリをテストすることはできませんが、常にビルドを作成する必要があることを意味します.
Svelteは開発中の最初のモードでは、svelte-kit dev , Serverlessなレンダリング関数を最適化されていないサーバーバンドルに接続し、Svelte独自のローカルサーバーの前で選択したサーバーレスプロバイダーのローカルサーバーを配置します.この方法では、独自の非Svelteサーバーレス関数をプロジェクトに追加することもできます.Svelteは、すでに雪のパックを採用することによって、クライアント側の開発経験を即座に作った今、それはServerless開発のために同じように時間です.

無力な最初の未来
Svelteのキットとして見て初期の段階にあり、サヴェルチームはすでにサパーと無制限のフレームワークを作ることができることを証明している、私は楽観的な次のsvelteは本当にServerless最初になります.私はServerless機能が拡張可能であり、Svelteの将来のバージョンで開発モードで動作します.