Cache embeds for faster rendering (#2488)

Author: SamyPesse

.changeset/gentle-oranges-nail.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve performances of loading pages with embeds by caching them

packages/gitbook/src/components/DocumentView/Embed.tsx

@@ -4,7 +4,7 @@ import Script from 'next/script';
 import ReactDOM from 'react-dom';
 
 import { Card } from '@/components/primitives';
-import { api } from '@/lib/api';
+import { getEmbedByUrlInSpace, getEmbedByUrl } from '@/lib/api';
 import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
@@ -17,9 +17,9 @@ export async function Embed(props: BlockProps<gitbookAPI.DocumentBlockEmbed>) {
 
  ReactDOM.preload('https://cdn.iframe.ly/embed.js', { as: 'script', nonce });
 
- const { data: embed } = await (context.content
- ? api().spaces.getEmbedByUrlInSpace(context.content.spaceId, { url: block.data.url })
- : api().urls.getEmbedByUrl({ url: block.data.url }));
+ const embed = await (context.content
+ ? getEmbedByUrlInSpace(context.content.spaceId, block.data.url)
+ : getEmbedByUrl(block.data.url));
 
  return (
  <Caption {...props}>

packages/gitbook/src/lib/api.ts

@@ -64,16 +64,16 @@ export interface ContentTarget {
 }
 
 /**
- * Parameter to cache an entry as an immutable one (ex: revisions, documents).
+ * Parameter to cache an entry for a certain period of time.
  * It'll cache it for 1 week and revalidate it 24h before expiration.
  *
  * We don't cache for more than this to ensure we don't use too much storage and keep the cache small.
  */
-const immutableCacheTtl_7days = {
+const cacheTtl_7days = {
  revalidateBefore: 24 * 60 * 60,
  ttl: 7 * 24 * 60 * 60,
 };
-const immutableCacheTtl_1day = {
+const cacheTtl_1day = {
  revalidateBefore: 60 * 60,
  ttl: 24 * 60 * 60,
 };
@@ -364,10 +364,7 @@ export const getRevision = cache({
  },
  );
 
- return cacheResponse(
- response,
- fetchOptions.metadata ? immutableCacheTtl_7days : immutableCacheTtl_1day,
- );
+ return cacheResponse(response, fetchOptions.metadata ? cacheTtl_7days : cacheTtl_1day);
  },
  getKeyArgs: (args) => [args[0], args[1]],
 });
@@ -398,7 +395,7 @@ export const getRevisionPages = cache({
  );
 
  return cacheResponse(response, {
- ...(fetchOptions.metadata ? immutableCacheTtl_7days : immutableCacheTtl_1day),
+ ...(fetchOptions.metadata ? cacheTtl_7days : cacheTtl_1day),
  data: response.data.pages,
  });
  },
@@ -434,12 +431,12 @@ export const getRevisionPageByPath = cache({
  },
  );
 
- return cacheResponse(response, immutableCacheTtl_7days);
+ return cacheResponse(response, cacheTtl_7days);
  } catch (error) {
  if ((error as GitBookAPIError).code === 404) {
  return {
  data: null,
- ...immutableCacheTtl_7days,
+ ...cacheTtl_7days,
  };
  }
 
@@ -478,10 +475,10 @@ const getRevisionFileById = cache({
  );
  })();
 
- return cacheResponse(response, immutableCacheTtl_7days);
+ return cacheResponse(response, cacheTtl_7days);
  } catch (error: any) {
  if (error instanceof GitBookAPIError && error.code === 404) {
- return { data: null, ...immutableCacheTtl_7days };
+ return { data: null, ...cacheTtl_7days };
  }
 
  throw error;
@@ -522,7 +519,7 @@ const getRevisionAllFiles = cache({
  files[file.id] = file;
  });
 
- return cacheResponse(response, { ...immutableCacheTtl_7days, data: files });
+ return cacheResponse(response, { ...cacheTtl_7days, data: files });
  },
  timeout: 60 * 1000,
 });
@@ -599,7 +596,7 @@ export const getDocument = cache({
  ...noCacheFetchOptions,
  },
  );
- return cacheResponse(response, immutableCacheTtl_7days);
+ return cacheResponse(response, cacheTtl_7days);
  },
  // Temporarily allow for a longer timeout than the default 10s
  // because GitBook's API currently re-normalizes all documents
@@ -1084,6 +1081,43 @@ export const renderIntegrationUi = cache({
  },
 });
 
+/**
+ * Fetch an embed.
+ * We don't cache them by cache tag, as we never purge them (they expire after 7 days).
+ */
+export const getEmbedByUrl = cache({
+ name: 'api.getEmbedByUrl',
+ get: async (url: string, options: CacheFunctionOptions) => {
+ const response = await api().urls.getEmbedByUrl(
+ { url },
+ {
+ ...noCacheFetchOptions,
+ signal: options.signal,
+ },
+ );
+ return cacheResponse(response);
+ },
+});
+
+/**
+ * Fetch an embed in a space.
+ */
+export const getEmbedByUrlInSpace = cache({
+ name: 'api.getEmbedByUrlInSpace',
+ tag: (spaceId) => getAPICacheTag({ tag: 'space', space: spaceId }),
+ get: async (spaceId: string, url: string, options: CacheFunctionOptions) => {
+ const response = await api().spaces.getEmbedByUrlInSpace(
+ spaceId,
+ { url },
+ {
+ ...noCacheFetchOptions,
+ signal: options.signal,
+ },
+ );
+ return cacheResponse(response, cacheTtl_7days);
+ },
+});
+
 /**
  * Create a cache tag for the API.
  */