SvelteKit文字化け対応策

SvelteKitのCSRを使用していると、まれに発生する文字化けが発生することがあります。
ページをリロードすれば一時的に解消しますが、根本的な解決には至りません。この記事では、その対応策についてご紹介します。

（※現在、文字化けが発生しないか観測中の段階です）

原因

CSRの場合、サーバーサイドからJSON形式でデータがフロントエンドに送られてきます。
このデータの文字コードが原因で、JSONデータ内で文字化けが発生することがあります。
そのため、HTML側で<meta charset="utf-8" />と設定していても、文字化けが発生してしまいます。

対応策

SvelteKitのHooks機能を利用して、レスポンスのヘッダーに文字コードを明示的に指定します。
以下は実装例です。

import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
	const response = await resolve(event);
	const contentType = response.headers.get('Content-Type');
	response.headers.set('Content-Type', `${contentType}; charset=UTF-8`);
	return response;
};

この実装により、全てのレスポンスにUTF-8の文字コードが設定されるようになります。これで文字化けを防ぐことが期待できます。