perf: add Prisma query caching, ISR for news pages, and aggressive SW caching

- Introduce redis-backed Prisma query cache (prisma-cache.ts) with per-model TTL
- Replace force-dynamic with revalidate=60 + generateStaticParams on news/[slug]
- Wrap article query with Redis cache (60s TTL)
- Upgrade service worker to v2 with dedicated API cache and stale-while-revalidate
  for static assets
This commit is contained in:
openhands committed 2026-07-20 14:54:55 +02:00
1 parent d5e3bc7875
commit c8ccbe1f42
3 files changed
+135 -30

No files matched your search

+23 -14
View File
@@ -1,11 +1,7 @@
// Minimal service worker for the AtomCMS-Next PWA. Cache-first for immutable const CACHE = "atom-v2";
// static assets, network-first for navigations (with a cached fallback so the const API_CACHE = "atom-api-v2";
// shell still loads offline). Bump CACHE to invalidate.
const CACHE = "atom-v1";
self.addEventListener("install", () => { self.addEventListener("install", () => self.skipWaiting());
self.skipWaiting();
});
self.addEventListener("activate", (event) => { self.addEventListener("activate", (event) => {
event.waitUntil( event.waitUntil(
@@ -13,7 +9,7 @@ self.addEventListener("activate", (event) => {
.keys() .keys()
.then((keys) => .then((keys) =>
Promise.all( Promise.all(
keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)), keys.filter((k) => k !== CACHE && k !== API_CACHE).map((k) => caches.delete(k)),
), ),
) )
.then(() => self.clients.claim()), .then(() => self.clients.claim()),
@@ -26,7 +22,6 @@ self.addEventListener("fetch", (event) => {
const url = new URL(req.url); const url = new URL(req.url);
if (url.origin !== self.location.origin) return; if (url.origin !== self.location.origin) return;
// Cache-first for immutable static assets.
if ( if (
url.pathname.startsWith("/assets/") || url.pathname.startsWith("/assets/") ||
url.pathname.startsWith("/_next/static/") url.pathname.startsWith("/_next/static/")
@@ -46,16 +41,30 @@ self.addEventListener("fetch", (event) => {
return; return;
} }
// Network-first for page navigations; fall back to cache, then the shell. if (
url.pathname.startsWith("/api/home") ||
url.pathname.startsWith("/api/online") ||
url.pathname.startsWith("/api/radio/config")
) {
event.respondWith(
caches.open(API_CACHE).then((cache) =>
fetch(req)
.then((res) => {
if (res.ok) cache.put(req, res.clone());
return res;
})
.catch(() => cache.match(req)),
),
);
return;
}
if (req.mode === "navigate") { if (req.mode === "navigate") {
event.respondWith( event.respondWith(
fetch(req) fetch(req)
.then((res) => { .then((res) => {
const copy = res.clone(); const copy = res.clone();
caches caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => {});
.open(CACHE)
.then((c) => c.put(req, copy))
.catch(() => {});
return res; return res;
}) })
.catch(() => caches.match(req).then((hit) => hit || caches.match("/"))), .catch(() => caches.match(req).then((hit) => hit || caches.match("/"))),
+34 -16
View File
@@ -9,9 +9,21 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
import { auth } from "@/lib/auth"; import { auth } from "@/lib/auth";
import { excerpt } from "@/lib/format"; import { excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma"; import { prisma } from "@/lib/prisma";
import { cacheQuery } from "@/lib/prisma-cache";
import { sanitize } from "@/lib/sanitize"; import { sanitize } from "@/lib/sanitize";
export const dynamic = "force-dynamic"; export const revalidate = 60;
export async function generateStaticParams() {
const slugs = await prisma.websiteArticles
.findMany({
select: { slug: true },
orderBy: { createdAt: "desc" },
take: 20,
})
.catch(() => []);
return slugs.map((a) => ({ slug: a.slug }));
}
export async function generateMetadata({ export async function generateMetadata({
params, params,
@@ -55,21 +67,27 @@ export default async function ArticlePage({
const { slug } = await params; const { slug } = await params;
const t = await getTranslations("pages.article"); const t = await getTranslations("pages.article");
const article = await prisma.websiteArticles const article = await cacheQuery(
.findUnique({ "websiteArticles",
where: { slug }, "findUnique",
select: { { slug },
id: true, () =>
slug: true, prisma.websiteArticles
title: true, .findUnique({
shortStory: true, where: { slug },
fullStory: true, select: {
image: true, id: true,
createdAt: true, slug: true,
updatedAt: true, title: true,
}, shortStory: true,
}) fullStory: true,
.catch(() => null); image: true,
createdAt: true,
updatedAt: true,
},
})
.catch(() => null),
);
if (!article) notFound(); if (!article) notFound();
const articleId = article.id; const articleId = article.id;
+78
View File
@@ -0,0 +1,78 @@
import "server-only";
import { redis } from "@/lib/redis";
type CacheableQuery = {
model: string;
action: string;
args: unknown;
};
const CACHE_TTL: Record<string, number> = {
websiteArticles: 60,
websiteArticleComments: 10,
websiteHelpCenterCategories: 300,
websiteSettings: 600,
websiteBanners: 120,
websitePolls: 30,
websiteEvents: 30,
emulatorSettings: 300,
emulatorTexts: 300,
aclRoles: 600,
aclPermissions: 600,
users: 10,
ranks: 600,
};
const AVOID_CACHE = new Set(["count", "groupBy"]);
function shouldCache(model: string, action: string): boolean {
if (AVOID_CACHE.has(action)) return false;
return model in CACHE_TTL;
}
function queryKey(model: string, action: string, args: unknown): string {
const hash = JSON.stringify(args).replace(/["{}[\],]/g, "").slice(0, 120);
return `pq:${model}:${action}:${hash}`;
}
export function cacheQuery<T>(
model: string,
action: string,
args: unknown,
fn: () => Promise<T>,
): Promise<T> {
if (!shouldCache(model, action)) return fn();
const ttl = CACHE_TTL[model];
const key = queryKey(model, action, args);
return _cachedQuery(key, ttl, fn);
}
async function _cachedQuery<T>(
key: string,
ttl: number,
fn: () => Promise<T>,
): Promise<T> {
if (!redis) return fn();
try {
const cached = await redis.get(key);
if (cached !== null) {
return JSON.parse(cached) as T;
}
} catch {
// ignore
}
const result = await fn();
try {
await redis.setex(key, ttl, JSON.stringify(result));
} catch {
// ignore
}
return result;
}