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
5 changed files with 54 additions and 9 deletions
+6 -1
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, {
+6 -1
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, {
+6 -1
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, {
+6 -1
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, {
+30 -5
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}`,
],
]);
}
});