Merge pull request #2 from Seia-Soto/fix/add-caching-for-image-proxy

Add etag support for static attachment of post

package.json

@@ -27,6 +27,7 @@
     "gray-matter": "^4.0.2",
     "js-yaml": "^4.0.0",
     "js-yaml-loader": "^1.2.2",
+    "mime-types": "^2.1.29",
     "next": "^10.0.7",
     "next-compose-plugins": "^2.2.1",
     "next-images": "^1.7.0",

pages/api/assets/[slug]/[filename].js

@@ -1,11 +1,35 @@
+import * as crypto from 'crypto'
 import * as fs from 'fs'
 import * as path from 'path'
+import * as mime from 'mime-types'
 
 import * as post from '../../../../fns/post'
 
 const postsRoot = path.resolve(process.cwd(), 'contents', 'posts')
 const postList = post.getList()
 
+const etags = {}
+
+const readBytes = (location, bytes) => {
+  return new Promise((resolve, reject) => {
+    fs.open(location, 'r', (status, fd) => {
+      if (status) {
+        reject(new Error('file is busy or unavailable:', status.message))
+      }
+
+      const buffer = Buffer.alloc(bytes)
+
+      fs.read(fd, buffer, 0, bytes, 0, (error, x) => {
+        if (error) {
+          reject(new Error('cannot read bytes from file:', error))
+        }
+
+        resolve(buffer.toString('utf8', 0, x))
+      })
+    })
+  })
+}
+
 export default async (req, res) => {
   const [slug, filename] = req.url
     .split('?')[0]
@@ -16,11 +40,31 @@ export default async (req, res) => {
   if (!fs.existsSync(assetPath)) {
     res.status(404)
     res.end()
+
+    return
   }
 
-  fs
-    .createReadStream(assetPath)
-    .pipe(res)
+  if (!etags[assetPath]) {
+    const firstBytes = await readBytes(assetPath, 256)
+
+    etags[assetPath] = crypto.createHash('md5').update(firstBytes).digest('hex')
+  }
+
+  const hash = req.headers['if-none-match']
+
+  if (hash && hash === etags[assetPath]) {
+    res.status(304)
+    res.end()
+
+    return
+  }
+
+  const stream = fs.createReadStream(assetPath)
+
+  res.setHeader('Content-Type', mime.contentType(path.extname(assetPath)))
+  res.setHeader('ETag', etags[assetPath])
+
+  stream.pipe(res)
 }
 
 export const config = {

yarn.lock

@@ -4873,7 +4873,7 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.29, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24":
   version: 2.1.29
   resolution: "mime-types@npm:2.1.29"
   dependencies:
@@ -7332,6 +7332,7 @@ fsevents@~2.3.1:
     gray-matter: ^4.0.2
     js-yaml: ^4.0.0
     js-yaml-loader: ^1.2.2
+    mime-types: ^2.1.29
     next: ^10.0.7
     next-compose-plugins: ^2.2.1
     next-images: ^1.7.0