maximize Cloudflare edge caching
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { proxyBackendJsonGet } from "@/lib/api-proxy";
|
||||
import { buildCityDetailProxyCachePolicy } from "@/lib/proxy-cache-policy";
|
||||
import {
|
||||
buildCityDetailProxyCachePolicy,
|
||||
NO_STORE_CACHE_CONTROL,
|
||||
} from "@/lib/proxy-cache-policy";
|
||||
import {
|
||||
createProxyTimer,
|
||||
finishProxyTimedResponse,
|
||||
@@ -79,7 +82,7 @@ export async function GET(req: NextRequest) {
|
||||
|
||||
const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
|
||||
const requestedCities = parseRequestedCities(req);
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh, 15);
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh);
|
||||
const searchParams = new URLSearchParams({
|
||||
cities: req.nextUrl.searchParams.get("cities") || "",
|
||||
force_refresh: forceRefresh,
|
||||
@@ -100,7 +103,7 @@ export async function GET(req: NextRequest) {
|
||||
data &&
|
||||
typeof data === "object" &&
|
||||
(data as { partial?: unknown }).partial === true
|
||||
? "no-store, max-age=0"
|
||||
? NO_STORE_CACHE_CONTROL
|
||||
: cachePolicy.responseCacheControl,
|
||||
fetchCache: "no-store",
|
||||
publicMessage: "Failed to fetch city detail batch",
|
||||
@@ -108,7 +111,10 @@ export async function GET(req: NextRequest) {
|
||||
signal: controller.signal,
|
||||
timeoutResponse: () =>
|
||||
NextResponse.json(buildCityDetailBatchTimeoutPayload(requestedCities), {
|
||||
headers: { "Cache-Control": "no-store, max-age=0" },
|
||||
headers: {
|
||||
"Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
"Cloudflare-CDN-Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
},
|
||||
status: 200,
|
||||
}),
|
||||
timeoutPublicMessage: "City detail batch request timed out",
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import { NextRequest } from "next/server";
|
||||
import { proxyBackendJsonGet } from "@/lib/api-proxy";
|
||||
import { buildCachedJsonResponse } from "@/lib/http-cache";
|
||||
import {
|
||||
buildCityListCacheControl,
|
||||
buildStaticCityListFallbackCacheControl,
|
||||
} from "@/lib/proxy-cache-policy";
|
||||
import { STATIC_CITY_LIST } from "@/lib/static-cities";
|
||||
|
||||
const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
|
||||
const CITIES_CACHE_CONTROL = "public, max-age=0, s-maxage=60, stale-while-revalidate=300";
|
||||
const STATIC_CITIES_CACHE_CONTROL =
|
||||
"public, max-age=0, s-maxage=300, stale-while-revalidate=3600";
|
||||
const CITIES_CACHE_CONTROL = buildCityListCacheControl();
|
||||
const STATIC_CITIES_CACHE_CONTROL = buildStaticCityListFallbackCacheControl();
|
||||
const CITIES_BACKEND_TIMEOUT_MS = Number(
|
||||
process.env.POLYWEATHER_CITIES_BACKEND_TIMEOUT_MS || 1000,
|
||||
);
|
||||
|
||||
@@ -49,7 +49,7 @@ export async function GET(
|
||||
|
||||
const { name } = await timer.measure("route_params", () => context.params);
|
||||
const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh, 15);
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh);
|
||||
const depth = req.nextUrl.searchParams.get("depth");
|
||||
const marketSlug = req.nextUrl.searchParams.get("market_slug");
|
||||
const targetDate = req.nextUrl.searchParams.get("target_date");
|
||||
@@ -82,7 +82,7 @@ export async function GET(
|
||||
headers: auth.headers,
|
||||
...(cachePolicy.fetchMode === "no-store"
|
||||
? { cache: "no-store" as const }
|
||||
: { next: { revalidate: cachePolicy.revalidateSeconds ?? 15 } }),
|
||||
: { next: { revalidate: cachePolicy.revalidateSeconds ?? 60 } }),
|
||||
}),
|
||||
);
|
||||
const backendServerTiming = res.headers.get("server-timing") || "";
|
||||
|
||||
@@ -139,7 +139,7 @@ export async function GET(
|
||||
const { name } = await context.params;
|
||||
const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
|
||||
const depth = req.nextUrl.searchParams.get("depth") ?? "panel";
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh, 15);
|
||||
const cachePolicy = buildCityDetailProxyCachePolicy(forceRefresh);
|
||||
const url = `${API_BASE}/api/city/${encodeURIComponent(name)}?force_refresh=${forceRefresh}&depth=${encodeURIComponent(depth)}`;
|
||||
|
||||
try {
|
||||
@@ -150,7 +150,7 @@ export async function GET(
|
||||
headers: auth.headers,
|
||||
...(cachePolicy.fetchMode === "no-store"
|
||||
? { cache: "no-store" as const }
|
||||
: { next: { revalidate: cachePolicy.revalidateSeconds ?? 15 } }),
|
||||
: { next: { revalidate: cachePolicy.revalidateSeconds ?? 60 } }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const raw = await res.text();
|
||||
@@ -159,7 +159,7 @@ export async function GET(
|
||||
headers: auth.headers,
|
||||
...(cachePolicy.fetchMode === "no-store"
|
||||
? { cache: "no-store" as const }
|
||||
: { next: { revalidate: 10 } }),
|
||||
: { next: { revalidate: cachePolicy.revalidateSeconds ?? 60 } }),
|
||||
});
|
||||
if (summaryRes.ok) {
|
||||
const summaryData = await summaryRes.json();
|
||||
@@ -168,7 +168,7 @@ export async function GET(
|
||||
buildFallbackCityDetail(name, depth, summaryData),
|
||||
cachePolicy.fetchMode === "no-store"
|
||||
? cachePolicy.responseCacheControl
|
||||
: "public, max-age=0, s-maxage=10, stale-while-revalidate=30",
|
||||
: cachePolicy.responseCacheControl,
|
||||
);
|
||||
response.headers.set("X-PolyWeather-Fallback", "summary");
|
||||
return applyAuthResponseCookies(response, auth.response);
|
||||
|
||||
@@ -2,10 +2,13 @@ import assert from "node:assert/strict";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import {
|
||||
buildCityListCacheControl,
|
||||
buildScanTerminalResponseCacheControl,
|
||||
buildCityDetailProxyCachePolicy,
|
||||
buildForceRefreshProxyCachePolicy,
|
||||
buildPublicEdgeCacheControl,
|
||||
isForceRefreshValue,
|
||||
NO_STORE_CACHE_CONTROL,
|
||||
} from "@/lib/proxy-cache-policy";
|
||||
|
||||
export function runTests() {
|
||||
@@ -18,11 +21,21 @@ export function runTests() {
|
||||
assert.match(forced.responseCacheControl, /no-store/);
|
||||
assert.equal(forced.revalidateSeconds, undefined);
|
||||
|
||||
const cached = buildCityDetailProxyCachePolicy("false", 15);
|
||||
const cached = buildCityDetailProxyCachePolicy("false");
|
||||
assert.equal(cached.fetchMode, "revalidate");
|
||||
assert.equal(cached.revalidateSeconds, 15);
|
||||
assert.match(cached.responseCacheControl, /max-age=15/);
|
||||
assert.match(cached.responseCacheControl, /s-maxage=15/);
|
||||
assert.equal(cached.revalidateSeconds, 60);
|
||||
assert.match(cached.responseCacheControl, /max-age=30/);
|
||||
assert.match(cached.responseCacheControl, /s-maxage=60/);
|
||||
assert.match(cached.responseCacheControl, /stale-while-revalidate=300/);
|
||||
|
||||
assert.equal(
|
||||
buildPublicEdgeCacheControl(60, 300),
|
||||
"public, max-age=0, s-maxage=60, stale-while-revalidate=300",
|
||||
);
|
||||
assert.equal(
|
||||
buildCityListCacheControl(),
|
||||
"public, max-age=0, s-maxage=300, stale-while-revalidate=3600",
|
||||
);
|
||||
|
||||
const scanForced = buildForceRefreshProxyCachePolicy("true", 10);
|
||||
assert.equal(scanForced.fetchMode, "no-store");
|
||||
@@ -34,15 +47,15 @@ export function runTests() {
|
||||
);
|
||||
assert.equal(
|
||||
buildScanTerminalResponseCacheControl({ status: "failed", stale: false }, normalScanCache),
|
||||
"no-store, max-age=0",
|
||||
NO_STORE_CACHE_CONTROL,
|
||||
);
|
||||
assert.equal(
|
||||
buildScanTerminalResponseCacheControl({ status: "partial", stale: false }, normalScanCache),
|
||||
"no-store, max-age=0",
|
||||
NO_STORE_CACHE_CONTROL,
|
||||
);
|
||||
assert.equal(
|
||||
buildScanTerminalResponseCacheControl({ status: "ready", stale: true }, normalScanCache),
|
||||
"no-store, max-age=0",
|
||||
NO_STORE_CACHE_CONTROL,
|
||||
);
|
||||
|
||||
const scanTerminalProxySource = fs.readFileSync(
|
||||
|
||||
@@ -101,6 +101,16 @@ export function runTests() {
|
||||
/cacheControlForData\?:/,
|
||||
"generic backend JSON proxy should allow response cache policy to depend on parsed data",
|
||||
);
|
||||
assert.match(
|
||||
apiProxySource,
|
||||
/Cloudflare-CDN-Cache-Control/,
|
||||
"generic backend JSON proxy should expose Cloudflare-specific cache directives",
|
||||
);
|
||||
assert.match(
|
||||
apiProxySource,
|
||||
/NO_STORE_CACHE_CONTROL/,
|
||||
"generic backend JSON proxy errors must remain non-cacheable when Cache Everything is enabled",
|
||||
);
|
||||
|
||||
const scanTerminalProxy = readFrontend("app", "api", "scan", "terminal", "route.ts");
|
||||
assert.match(scanTerminalProxy, /createProxyTimer\(req,\s*"scan_terminal"\)/);
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
finishProxyTimedResponse,
|
||||
type ProxyTimer,
|
||||
} from "@/lib/proxy-timing";
|
||||
import { NO_STORE_CACHE_CONTROL } from "@/lib/proxy-cache-policy";
|
||||
|
||||
const PASSTHROUGH_UPSTREAM_STATUSES = new Set([
|
||||
400,
|
||||
@@ -85,6 +86,10 @@ export function buildUpstreamErrorResponse(
|
||||
}
|
||||
|
||||
return NextResponse.json(body, {
|
||||
headers: {
|
||||
"Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
"Cloudflare-CDN-Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
},
|
||||
status: clientStatusFromUpstream(upstreamStatus),
|
||||
});
|
||||
}
|
||||
@@ -106,7 +111,13 @@ export function buildProxyExceptionResponse(
|
||||
body.detail = String(error);
|
||||
}
|
||||
|
||||
return NextResponse.json(body, { status: options.status ?? 500 });
|
||||
return NextResponse.json(body, {
|
||||
headers: {
|
||||
"Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
"Cloudflare-CDN-Cache-Control": NO_STORE_CACHE_CONTROL,
|
||||
},
|
||||
status: options.status ?? 500,
|
||||
});
|
||||
}
|
||||
|
||||
export async function proxyBackendJsonGet(
|
||||
@@ -185,7 +196,10 @@ export async function proxyBackendJsonGet(
|
||||
? buildCachedJsonResponse(req, data, responseCacheControl)
|
||||
: NextResponse.json(data, {
|
||||
headers: responseCacheControl
|
||||
? { "Cache-Control": responseCacheControl }
|
||||
? {
|
||||
"Cache-Control": responseCacheControl,
|
||||
"Cloudflare-CDN-Cache-Control": responseCacheControl,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
const withCookies = applyAuthResponseCookies(response, auth.response);
|
||||
|
||||
@@ -28,6 +28,7 @@ export function buildCachedJsonResponse(
|
||||
const etag = buildEtag(body);
|
||||
const headers = new Headers({
|
||||
"Cache-Control": cacheControl,
|
||||
"Cloudflare-CDN-Cache-Control": cacheControl,
|
||||
ETag: etag,
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
});
|
||||
|
||||
@@ -4,7 +4,32 @@ export type ProxyCachePolicy = {
|
||||
revalidateSeconds?: number;
|
||||
};
|
||||
|
||||
const NO_STORE_CACHE_CONTROL = "no-store, max-age=0";
|
||||
export const NO_STORE_CACHE_CONTROL = "no-store, max-age=0";
|
||||
|
||||
export const CLOUDFLARE_EDGE_TTL_SEC = {
|
||||
cityDetail: 60,
|
||||
cityDetailStale: 300,
|
||||
cityList: 300,
|
||||
cityListStale: 3600,
|
||||
landingPage: 600,
|
||||
scanTerminal: 300,
|
||||
scanTerminalStale: 900,
|
||||
staticAsset: 31536000,
|
||||
systemStatus: 60,
|
||||
} as const;
|
||||
|
||||
export function buildPublicEdgeCacheControl(
|
||||
sMaxageSeconds: number,
|
||||
staleWhileRevalidateSeconds = Math.max(sMaxageSeconds * 3, 30),
|
||||
browserMaxAgeSeconds = 0,
|
||||
) {
|
||||
return [
|
||||
"public",
|
||||
`max-age=${Math.max(0, Math.floor(browserMaxAgeSeconds))}`,
|
||||
`s-maxage=${Math.max(1, Math.floor(sMaxageSeconds))}`,
|
||||
`stale-while-revalidate=${Math.max(0, Math.floor(staleWhileRevalidateSeconds))}`,
|
||||
].join(", ");
|
||||
}
|
||||
|
||||
export function isForceRefreshValue(value: string | null | undefined) {
|
||||
return String(value || "").trim().toLowerCase() === "true";
|
||||
@@ -12,7 +37,7 @@ export function isForceRefreshValue(value: string | null | undefined) {
|
||||
|
||||
export function buildForceRefreshProxyCachePolicy(
|
||||
forceRefresh: string | null | undefined,
|
||||
revalidateSeconds = 15,
|
||||
revalidateSeconds: number = CLOUDFLARE_EDGE_TTL_SEC.scanTerminal,
|
||||
): ProxyCachePolicy {
|
||||
if (isForceRefreshValue(forceRefresh)) {
|
||||
return {
|
||||
@@ -22,17 +47,17 @@ export function buildForceRefreshProxyCachePolicy(
|
||||
}
|
||||
return {
|
||||
fetchMode: "revalidate",
|
||||
responseCacheControl: `public, max-age=0, s-maxage=${revalidateSeconds}, stale-while-revalidate=${Math.max(
|
||||
revalidateSeconds * 3,
|
||||
30,
|
||||
)}`,
|
||||
responseCacheControl: buildPublicEdgeCacheControl(
|
||||
revalidateSeconds,
|
||||
Math.max(revalidateSeconds * 3, CLOUDFLARE_EDGE_TTL_SEC.scanTerminalStale),
|
||||
),
|
||||
revalidateSeconds,
|
||||
};
|
||||
}
|
||||
|
||||
export function buildCityDetailProxyCachePolicy(
|
||||
forceRefresh: string | null | undefined,
|
||||
revalidateSeconds = 15,
|
||||
revalidateSeconds: number = CLOUDFLARE_EDGE_TTL_SEC.cityDetail,
|
||||
): ProxyCachePolicy {
|
||||
if (isForceRefreshValue(forceRefresh)) {
|
||||
return {
|
||||
@@ -42,14 +67,29 @@ export function buildCityDetailProxyCachePolicy(
|
||||
}
|
||||
return {
|
||||
fetchMode: "revalidate",
|
||||
responseCacheControl: `public, max-age=${revalidateSeconds}, s-maxage=${revalidateSeconds}, stale-while-revalidate=${Math.max(
|
||||
revalidateSeconds * 3,
|
||||
30,
|
||||
)}`,
|
||||
responseCacheControl: buildPublicEdgeCacheControl(
|
||||
revalidateSeconds,
|
||||
Math.max(revalidateSeconds * 3, CLOUDFLARE_EDGE_TTL_SEC.cityDetailStale),
|
||||
Math.min(revalidateSeconds, 30),
|
||||
),
|
||||
revalidateSeconds,
|
||||
};
|
||||
}
|
||||
|
||||
export function buildCityListCacheControl() {
|
||||
return buildPublicEdgeCacheControl(
|
||||
CLOUDFLARE_EDGE_TTL_SEC.cityList,
|
||||
CLOUDFLARE_EDGE_TTL_SEC.cityListStale,
|
||||
);
|
||||
}
|
||||
|
||||
export function buildStaticCityListFallbackCacheControl() {
|
||||
return buildPublicEdgeCacheControl(
|
||||
CLOUDFLARE_EDGE_TTL_SEC.cityList,
|
||||
CLOUDFLARE_EDGE_TTL_SEC.cityListStale,
|
||||
);
|
||||
}
|
||||
|
||||
export function buildScanTerminalResponseCacheControl(
|
||||
data: unknown,
|
||||
readyCacheControl: string,
|
||||
|
||||
@@ -3,15 +3,40 @@ const nextConfig = {
|
||||
output: "standalone",
|
||||
reactStrictMode: true,
|
||||
async headers() {
|
||||
const cacheHeader = {
|
||||
const immutableCacheHeader = {
|
||||
key: "Cache-Control",
|
||||
value: "public, max-age=31536000, immutable",
|
||||
};
|
||||
const immutableCloudflareCacheHeader = {
|
||||
key: "Cloudflare-CDN-Cache-Control",
|
||||
value: "public, max-age=31536000, immutable",
|
||||
};
|
||||
const publicPageHeaders = [
|
||||
{
|
||||
key: "Cache-Control",
|
||||
value: "public, max-age=0, s-maxage=600, stale-while-revalidate=3600",
|
||||
},
|
||||
{
|
||||
key: "Cloudflare-CDN-Cache-Control",
|
||||
value: "public, max-age=600, stale-while-revalidate=3600",
|
||||
},
|
||||
];
|
||||
const staticExts = ["jpg", "jpeg", "png", "gif", "ico", "svg", "webp", "avif", "woff2", "ttf", "eot", "css", "js"];
|
||||
return staticExts.map((ext) => ({
|
||||
const staticAssetRules = staticExts.map((ext) => ({
|
||||
source: `/:path(.+\\.${ext})`,
|
||||
headers: [cacheHeader],
|
||||
headers: [immutableCacheHeader, immutableCloudflareCacheHeader],
|
||||
}));
|
||||
const publicPageRules = [
|
||||
"/",
|
||||
"/docs/:path*",
|
||||
"/modern/:path*",
|
||||
"/probabilities/:path*",
|
||||
"/subscription-help/:path*",
|
||||
].map((source) => ({
|
||||
source,
|
||||
headers: publicPageHeaders,
|
||||
}));
|
||||
return [...staticAssetRules, ...publicPageRules];
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user