Merge pull request #405 from spencerwooo/edge-caching

components/Breadcrumb.tsx

@@ -9,7 +9,7 @@ const HomeCrumb = () => {
 
   return (
     <Link href="/">
-      <a>
+      <a className="flex items-center">
         <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
         <span className="ml-2 font-medium">{t('Home')}</span>
       </a>

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=0, s-maxage=600, 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.' })

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=0, s-maxage=600, stale-while-revalidate')
+
   if (typeof id === 'string') {
     const itemApi = `${apiConfig.driveApi}/items/${id}`
 

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=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
     const searchRootPath = encodePath('/')

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=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') {
     res.status(400).json({ error: 'Invalid size' })