perf(website): add ttl cache for algolia ssr to reduce requests

fontsource · Dec 11, 2023 · bb918dc · bb918dc
1 parent 4a8fcfc
commit bb918dc
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/app/routes/_index.tsx b/website/app/routes/_index.tsx
@@ -15,6 +15,7 @@ import {
 import { Filters } from '@/components/search/Filters';
 import { InfiniteHits } from '@/components/search/Hits';
 import classes from '@/styles/global.module.css';
+import { getSSRCache, setSSRCache } from '@/utils/algolia.server';
 
 import { theme } from '../styles/theme';
 
@@ -102,22 +103,38 @@ const routing = (serverUrl: string): any => {
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const serverUrl = request.url;
-	const serverState = await getServerState(
+
+	// Check local cache for server state first to avoid unnecessary API calls
+	let serverState = getSSRCache(serverUrl);
+	if (serverState) {
+		return json<SearchProps>({
+			serverState,
+			serverUrl,
+		});
+	}
+
+	serverState = await getServerState(
 		<MantineProvider theme={theme}>
-			<InstantSearch
-				searchClient={searchClient}
-				indexName="prod_POPULAR"
-				routing={routing(serverUrl)}
-				future={{ preserveSharedStateOnUnmount: true }}
-			>
-				<Filters />
-			</InstantSearch>
+			<InstantSearchSSRProvider>
+				<InstantSearch
+					searchClient={searchClient}
+					indexName="prod_POPULAR"
+					routing={routing(serverUrl)}
+					future={{ preserveSharedStateOnUnmount: true }}
+				>
+					<Filters />
+					<InfiniteHits />
+				</InstantSearch>
+			</InstantSearchSSRProvider>
 		</MantineProvider>,
 		{
 			renderToString,
 		},
 	);
 
+	// Add server state to local cache before responding
+	setSSRCache(serverUrl, serverState);
+
 	return json<SearchProps>({
 		serverState,
 		serverUrl,

diff --git a/website/app/utils/algolia.server.ts b/website/app/utils/algolia.server.ts
@@ -1,4 +1,6 @@
+import TTLCache from '@isaacs/ttlcache';
 import algoliasearch from 'algoliasearch';
+import { type InstantSearchServerState } from 'react-instantsearch';
 
 import {
 	getFontlist,
@@ -7,6 +9,23 @@ import {
 } from '@/utils/metadata.server';
 import type { AlgoliaMetadata } from '@/utils/types';
 
+// Cache for Algolia SSR state to avoid re-fetching on every request
+const ALGOLIA_TTL = 6 * 60 * 60 * 1000; // 6 hours
+const ssrCache = new TTLCache({ ttl: ALGOLIA_TTL });
+
+const getSSRCache = (
+	serverUrl: string,
+): InstantSearchServerState | undefined => {
+	return ssrCache.get(serverUrl);
+};
+
+const setSSRCache = (serverUrl: string, state: InstantSearchServerState) => {
+	ssrCache.set(serverUrl, state);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const client = algoliasearch('WNATE69PVR', process.env.ALGOLIA_ADMIN_KEY!);
+
 const shuffleArray = (size: number) => {
 	// Generate array of numbers from 0 to size
 	const arr: number[] = [...Array.from({ length: size }).keys()];
@@ -19,9 +38,6 @@ const shuffleArray = (size: number) => {
 	return arr;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const client = algoliasearch('WNATE69PVR', process.env.ALGOLIA_ADMIN_KEY!);
-
 const updateAlgoliaIndex = async (force?: boolean) => {
 	try {
 		// Get font list
@@ -77,4 +93,4 @@ const updateAlgoliaIndex = async (force?: boolean) => {
 	}
 };
 
-export { updateAlgoliaIndex };
+export { getSSRCache, setSSRCache, updateAlgoliaIndex };
diff --git a/website/package.json b/website/package.json
@@ -16,6 +16,7 @@
 		"@fontsource-utils/generate": "^0.3.1",
 		"@fontsource-variable/inter": "^5.0.16",
 		"@fontsource-variable/source-code-pro": "^5.0.17",
+		"@isaacs/ttlcache": "^1.4.1",
 		"@legendapp/state": "^1.11.3",
 		"@mantine/core": "^7.3.1",
 		"@mantine/hooks": "^7.3.1",