Nginx環境でのSvelteKit遅延読み込み問題と解決策

開発環境ではSveltekitの遅延読み込みは問題なく動いていたのですが、Nginxを経由する本番環境では機能せず、ページの表示に時間がかかってしまうという現象にでくわしました。

環境

Service	Version
Nginx	1.18.0
@sveltejs/kit	2.5.28
Node.js	20.9.0

コード

+page.server.ts

import type { PageServerLoad } from './$types';

const getResponse = async (): Promise<void> => {
  await new Promise((resolve) => setTimeout(resolve, 10000));
};

export const load: PageServerLoad = async () => {
  return {
    data: getResponse()
  };
};

<script lang="ts">
    import type { PageData } from './$types';
    export let data: PageData;
</script>

{#await data.data}
    loading...
{:then data}
    遅延読み込み成功
{:catch}
    エラーが発生しました
{/await}

原因

プロキシ (例えば NGINX) を使用している場合は、プロキシされたサーバーからのレスポンスをバッファしないようにしてください。

公式ドキュメントに書いていました。

対応

NginxでStreamをbufferしないよう、下記設定を追加しました。

proxy_buffering off;

感想

公式ドキュメントしか勝たん。