feat: improve card loading speed (#2124)

* feat: improve card loading times

This commit adds the `stale-while-revalidate` option to speed up the
card loading times.

* mend
This commit is contained in:
Rick Staa 2022-11-21 10:21:46 +01:00 committed by GitHub
parent f07cd133d3
commit 3cb205c65b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 9 deletions

View File

@ -61,7 +61,12 @@ export default async (req, res) => {
CONSTANTS.ONE_DAY,
);
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send(
renderStatsCard(stats, {

View File

@ -58,7 +58,12 @@ export default async (req, res) => {
cacheSeconds = CONSTANTS.FOUR_HOURS;
}
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send(
renderRepoCard(repoData, {

View File

@ -52,7 +52,12 @@ export default async (req, res) => {
CONSTANTS.ONE_DAY,
);
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send(
renderTopLanguages(topLangs, {

View File

@ -52,7 +52,12 @@ export default async (req, res) => {
cacheSeconds = CONSTANTS.FOUR_HOURS;
}
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send(
renderWakatimeCard(stats, {

View File

@ -160,7 +160,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`],
[
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]);
});
@ -170,7 +175,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${15000}`],
[
"Cache-Control",
`max-age=7500, s-maxage=${15000}, stale-while-revalidate=${
CONSTANTS.ONE_DAY
}`,
],
]);
});
@ -191,7 +201,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.ONE_DAY}`],
[
"Cache-Control",
`max-age=${CONSTANTS.ONE_DAY / 2}, s-maxage=${
CONSTANTS.ONE_DAY
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]);
}
@ -202,7 +217,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`],
[
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]);
}
@ -212,7 +232,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`],
[
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]);
}
});