feat: SSR pour toutes les cards de la page Settings

Toutes les configurations (Prowlarr, qBittorrent, Telegram, Anilist,
Komga, metadata providers, status mappings) sont maintenant récupérées
côté serveur dans page.tsx et passées en props aux cards.

Supprime ~10 fetchs client useEffect au chargement, élimine les
layout shifts et réduit le temps de rendu initial.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-27 09:11:12 +01:00
parent 432bb519ab
commit e7295a371d
9 changed files with 111 additions and 173 deletions

View File

@@ -1,30 +1,49 @@
import { getSettings, getCacheStats, getThumbnailStats, fetchUsers } from "@/lib/api";
import { getSettings, getCacheStats, getThumbnailStats, fetchUsers, apiFetch } from "@/lib/api";
import SettingsPage from "./SettingsPage";
export const dynamic = "force-dynamic";
export default async function SettingsPageWrapper({ searchParams }: { searchParams: Promise<{ tab?: string }> }) {
const { tab } = await searchParams;
const settings = await getSettings().catch(() => ({
image_processing: { format: "webp", quality: 85, filter: "lanczos3", max_width: 2160 },
cache: { enabled: true, directory: "/tmp/stripstream-image-cache", max_size_mb: 10000 },
limits: { concurrent_renders: 4, timeout_seconds: 12, rate_limit_per_second: 120 },
thumbnail: { enabled: true, width: 300, height: 400, quality: 80, format: "webp", directory: "/data/thumbnails" }
}));
const [settings, cacheStats, thumbnailStats, users, prowlarr, qbittorrent, torrentImport, telegram, anilist, komga, metadataProviders, statusMappings, seriesStatuses, providerStatuses] = await Promise.all([
getSettings().catch(() => ({
image_processing: { format: "webp", quality: 85, filter: "lanczos3", max_width: 2160 },
cache: { enabled: true, directory: "/tmp/stripstream-image-cache", max_size_mb: 10000 },
limits: { concurrent_renders: 4, timeout_seconds: 12, rate_limit_per_second: 120 },
thumbnail: { enabled: true, width: 300, height: 400, quality: 80, format: "webp", directory: "/data/thumbnails" }
})),
getCacheStats().catch(() => ({ total_size_mb: 0, file_count: 0, directory: "/tmp/stripstream-image-cache" })),
getThumbnailStats().catch(() => ({ total_size_mb: 0, file_count: 0, directory: "/data/thumbnails" })),
fetchUsers().catch(() => []),
apiFetch<Record<string, unknown>>("/settings/prowlarr").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/qbittorrent").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/torrent_import").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/telegram").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/anilist").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/komga").catch(() => null),
apiFetch<Record<string, unknown>>("/settings/metadata_providers").catch(() => null),
apiFetch<unknown[]>("/settings/status-mappings").catch(() => []),
apiFetch<unknown[]>("/series/statuses").catch(() => []),
apiFetch<unknown[]>("/series/provider-statuses").catch(() => []),
]);
const cacheStats = await getCacheStats().catch(() => ({
total_size_mb: 0,
file_count: 0,
directory: "/tmp/stripstream-image-cache"
}));
const thumbnailStats = await getThumbnailStats().catch(() => ({
total_size_mb: 0,
file_count: 0,
directory: "/data/thumbnails"
}));
const users = await fetchUsers().catch(() => []);
return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} users={users} initialTab={tab} />;
return (
<SettingsPage
initialSettings={settings}
initialCacheStats={cacheStats}
initialThumbnailStats={thumbnailStats}
users={users}
initialTab={tab}
initialProwlarr={prowlarr}
initialQbittorrent={qbittorrent}
initialTorrentImport={torrentImport}
initialTelegram={telegram}
initialAnilist={anilist}
initialKomga={komga}
initialMetadataProviders={metadataProviders}
initialStatusMappings={statusMappings as Record<string, unknown>[]}
initialSeriesStatuses={seriesStatuses as string[]}
initialProviderStatuses={providerStatuses as string[]}
/>
);
}