From 2686197b4a218a669c46e5aadd327f6fbee046e1 Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Thu, 10 Feb 2022 22:55:59 +0800 Subject: [PATCH 1/2] setup edge caching --- pages/api/index.ts | 4 ++++ pages/api/item.ts | 4 ++++ pages/api/search.ts | 4 ++++ pages/api/thumbnail.ts | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/pages/api/index.ts b/pages/api/index.ts index 5a73418..d63bb98 100644 --- a/pages/api/index.ts +++ b/pages/api/index.ts @@ -131,6 +131,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // If method is GET, then the API is a normal request to the OneDrive API for files or folders const { path = '/', raw = false, next = '' } = req.query + // Set edge function caching for faster load times, check docs: + // https://vercel.com/docs/concepts/functions/edge-caching + res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + // Sometimes the path parameter is defaulted to '[...path]' which we need to handle if (path === '[...path]') { res.status(400).json({ error: 'No path specified.' }) diff --git a/pages/api/item.ts b/pages/api/item.ts index 89e99b7..2801232 100644 --- a/pages/api/item.ts +++ b/pages/api/item.ts @@ -11,6 +11,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Get item details (specifically, its path) by its unique ID in OneDrive const { id = '' } = req.query + // Set edge function caching for faster load times, check docs: + // https://vercel.com/docs/concepts/functions/edge-caching + res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + if (typeof id === 'string') { const itemApi = `${apiConfig.driveApi}/items/${id}` diff --git a/pages/api/search.ts b/pages/api/search.ts index 1762264..cd04f83 100644 --- a/pages/api/search.ts +++ b/pages/api/search.ts @@ -32,6 +32,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Query parameter from request const { q: searchQuery = '' } = req.query + // Set edge function caching for faster load times, check docs: + // https://vercel.com/docs/concepts/functions/edge-caching + res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + if (typeof searchQuery === 'string') { // Construct Microsoft Graph Search API URL, and perform search only under the base directory const searchRootPath = encodePath('/') diff --git a/pages/api/thumbnail.ts b/pages/api/thumbnail.ts index 5ee18d7..1cf0da1 100644 --- a/pages/api/thumbnail.ts +++ b/pages/api/thumbnail.ts @@ -15,6 +15,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Get item thumbnails by its path since we will later check if it is protected const { path = '', size = 'medium' } = req.query + // Set edge function caching for faster load times, check docs: + // https://vercel.com/docs/concepts/functions/edge-caching + res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + // Check whether the size is valid - must be one of 'large', 'medium', or 'small' if (size !== 'large' && size !== 'medium' && size !== 'small') { res.status(400).json({ error: 'Invalid size' }) From 03163e9d327fd8418cd0c59b26be1c400ecd52ad Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Thu, 10 Feb 2022 23:06:11 +0800 Subject: [PATCH 2/2] reduce cache maxage --- components/Breadcrumb.tsx | 2 +- pages/api/index.ts | 2 +- pages/api/item.ts | 2 +- pages/api/search.ts | 2 +- pages/api/thumbnail.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx index f452eb1..4e96a31 100644 --- a/components/Breadcrumb.tsx +++ b/components/Breadcrumb.tsx @@ -9,7 +9,7 @@ const HomeCrumb = () => { return ( - + {t('Home')} diff --git a/pages/api/index.ts b/pages/api/index.ts index d63bb98..4f13f63 100644 --- a/pages/api/index.ts +++ b/pages/api/index.ts @@ -133,7 +133,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Set edge function caching for faster load times, check docs: // https://vercel.com/docs/concepts/functions/edge-caching - res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + res.setHeader('Cache-Control', 'max-age=0, s-maxage=600, stale-while-revalidate') // Sometimes the path parameter is defaulted to '[...path]' which we need to handle if (path === '[...path]') { diff --git a/pages/api/item.ts b/pages/api/item.ts index 2801232..322c32e 100644 --- a/pages/api/item.ts +++ b/pages/api/item.ts @@ -13,7 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Set edge function caching for faster load times, check docs: // https://vercel.com/docs/concepts/functions/edge-caching - res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + res.setHeader('Cache-Control', 'max-age=0, s-maxage=600, stale-while-revalidate') if (typeof id === 'string') { const itemApi = `${apiConfig.driveApi}/items/${id}` diff --git a/pages/api/search.ts b/pages/api/search.ts index cd04f83..40abfff 100644 --- a/pages/api/search.ts +++ b/pages/api/search.ts @@ -34,7 +34,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Set edge function caching for faster load times, check docs: // https://vercel.com/docs/concepts/functions/edge-caching - res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + res.setHeader('Cache-Control', 'max-age=0, s-maxage=600, stale-while-revalidate') if (typeof searchQuery === 'string') { // Construct Microsoft Graph Search API URL, and perform search only under the base directory diff --git a/pages/api/thumbnail.ts b/pages/api/thumbnail.ts index 1cf0da1..652ff21 100644 --- a/pages/api/thumbnail.ts +++ b/pages/api/thumbnail.ts @@ -17,7 +17,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) // Set edge function caching for faster load times, check docs: // https://vercel.com/docs/concepts/functions/edge-caching - res.setHeader('Cache-Control', 'max-age=60, s-maxage=3600, stale-while-revalidate') + res.setHeader('Cache-Control', 'max-age=0, s-maxage=600, stale-while-revalidate') // Check whether the size is valid - must be one of 'large', 'medium', or 'small' if (size !== 'large' && size !== 'medium' && size !== 'small') {