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:
1 parent
d5e3bc7875
commit
c8ccbe1f42
3 files changed
+135
-30
No files matched your search
+23
-14
@@ -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("/"))),
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
Reference in new issue
Block a user