We’ve introduced various ways of caching files on the server throughout this series. This article teaches how to help the browser perform caching on the client side. We use the entity tag (ETag) response header to do that.
Imagine having a GET /user/[user-id]/avatar endpoint that responds with an image. The browser calls it every time we visit a website and gets the image. We could optimize this process by telling the browser if the image changed since the last time the browser fetched it. To do that, we can put the hash of the image in the ETag response header. The hash of a particular image changes only if the image changes.
Image hashing is a process of using an algorithm to get a unique string to an image. If you want to know more about hashes, check out API with NestJS #3. Authenticating users with bcrypt, Passport, JWT, and cookies where we create hashes from passwords.
- the first time the browser requests /user/[user-id]/avatar, the server creates a hash and sends it in the ETag response header,
- the second time the browser requests /user/[user-id]/avatar, it sends the ETag value in the If-None-Match request header,
- the server calculates the hash for the second time, if the hash changes, the server sends the new image, if the hash doesn’t change, the server responds with 304 Not Modified instead.
Creating an ETag for an image
In API with NestJS #55. Uploading files to the server, we’ve implemented a feature of uploading avatars. Let’s create an endpoint that returns an avatar of a particular user and assigns the ETag.
To generate ETags, we can use the etag library that Express uses under the hood. Let’s install it.
1npm install etag @types/etag1import { UsersService } from './users.service';
2import {
3 Controller,
4 Get,
5 NotFoundException,
6 Param,
7 ParseIntPipe,
8 Res,
9 StreamableFile,
10} from '@nestjs/common';
11import { Response } from 'express';
12import LocalFilesService from '../localFiles/localFiles.service';
13import { join } from 'path';
14import * as etag from 'etag';
15import * as filesystem from 'fs';
16import * as util from 'util'
17
18const readFile = util.promisify(filesystem.readFile);
19
20@Controller('users')
21export class UsersController {
22 constructor(
23 private readonly usersService: UsersService,
24 private readonly localFilesService: LocalFilesService
25 ) {}
26
27 @Get(':userId/avatar')
28 async getAvatar(
29 @Param('userId', ParseIntPipe) userId: number,
30 @Res({ passthrough: true }) response: Response
31 ) {
32 const user = await this.usersService.getById(userId);
33 const fileId = user.avatarId;
34 if (!fileId) {
35 throw new NotFoundException();
36 }
37 const fileMetadata = await this.localFilesService.getFileById(user.avatarId);
38
39 const pathOnDisk = join(process.cwd(), fileMetadata.path);
40
41 const file = await readFile(pathOnDisk);
42
43 response.set({
44 'Content-Disposition': `inline; filename="${fileMetadata.filename}"`,
45 'Content-Type': fileMetadata.mimetype,
46 ETag: etag(file)
47 })
48
49 return new StreamableFile(file);
50 }
51
52 // ...
53}If you want to know more about the StreamableFile class, check out API with NestJS #54. Storing files inside a PostgreSQL database
Let’s look under the hood of the etag library to see what it is doing:
1function entitytag (entity) {
2 if (entity.length === 0) {
3 // fast-path empty
4 return '"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"'
5 }
6
7 // compute hash of entity
8 var hash = crypto
9 .createHash('sha1')
10 .update(entity, 'utf8')
11 .digest('base64')
12 .substring(0, 27)
13
14 // compute length of entity
15 var len = typeof entity === 'string'
16 ? Buffer.byteLength(entity, 'utf8')
17 : entity.length
18
19 return '"' + len.toString(16) + '-' + hash + '"'
20}The interesting part above is that it uses the crypto module built into Node.js. SHA-1 is a hashing algorithm that should not be used in web security, such as SSL certificates. Even though that’s the case, it is good performance-wise, and we can use it for generating ETags.
Also, we can notice, that a valid ETag is always enclosed in double quotes.
Comparing hashes
When the browser requests an image for the second time, it sends the ETag value along with the request in the If-None-Match header.
For the caching to occur, we need to take the above value into account.
1import { UsersService } from './users.service';
2import {
3 Controller,
4 Get,
5 NotFoundException,
6 Param,
7 ParseIntPipe,
8 Res,
9 Req,
10 StreamableFile,
11} from '@nestjs/common';
12import { Response, Request } from 'express';
13import LocalFilesService from '../localFiles/localFiles.service';
14import { join } from 'path';
15import * as etag from 'etag';
16import * as filesystem from 'fs';
17import * as util from 'util'
18
19const readFile = util.promisify(filesystem.readFile);
20
21@Controller('users')
22export class UsersController {
23 constructor(
24 private readonly usersService: UsersService,
25 private readonly localFilesService: LocalFilesService
26 ) {}
27
28 @Get(':userId/avatar')
29 async getAvatar(
30 @Param('userId', ParseIntPipe) userId: number,
31 @Res({ passthrough: true }) response: Response,
32 @Req() request: Request
33 ) {
34 const user = await this.usersService.getById(userId);
35 const fileId = user.avatarId;
36 if (!fileId) {
37 throw new NotFoundException();
38 }
39 const fileMetadata = await this.localFilesService.getFileById(user.avatarId);
40
41 const pathOnDisk = join(process.cwd(), fileMetadata.path);
42
43 const file = await readFile(pathOnDisk);
44
45 const tag = etag(file);
46
47 response.set({
48 'Content-Disposition': `inline; filename="${fileMetadata.filename}"`,
49 'Content-Type': fileMetadata.mimetype,
50 ETag: tag
51 })
52
53 if (request.headers['if-none-match'] === tag) {
54 response.status(304)
55 return;
56 }
57
58 return new StreamableFile(file);
59 }
60}If the browser requests an avatar before it changes, we respond with 304 Not Modified. Thanks to that, the browser knows that it can safely use the data from the cache.
We can see that the total data transferred over the network is now a lot less on the above screenshot. This is because the browser didn’t fetch the image when it requested it for the second time. This can be relevant to clients using a mobile Internet connection, for example.
Weak ETags
Throughout this article, we’ve created strong ETags. When two strong ETags are a match, it means that the content is byte-for-byte identical.
We can also create weak ETags distinguished by the W/ prefix in the value:
1ETag: W/"1e9e-y/nKAKgLpIJPJRrArS3h1OBKIU0"When two weak ETags are a match, it indicates that the content is semantically equivalent. It might not always change when the content changes.
ETag does not need to be a hash
Even if we use a fast hashing algorithm such as SHA1, it takes time to generate a hash. Therefore, sometimes it might be easier to use something else instead of it.
In our application, every file has an id. We can use it to create an ETag. Since we no longer calculate a hash of a file, we can mark the ETag as weak.
1@Get(':userId/avatar')
2async getAvatar(
3 @Param('userId', ParseIntPipe) userId: number,
4 @Res({ passthrough: true }) response: Response,
5 @Req() request: Request
6) {
7 const user = await this.usersService.getById(userId);
8 const fileId = user.avatarId;
9 if (!fileId) {
10 throw new NotFoundException();
11 }
12 const fileMetadata = await this.localFilesService.getFileById(user.avatarId);
13
14 const pathOnDisk = join(process.cwd(), fileMetadata.path);
15
16 const file = await readFile(pathOnDisk);
17
18 const tag = `W/"file-id-${fileId}"`;
19
20 response.set({
21 'Content-Disposition': `inline; filename="${fileMetadata.filename}"`,
22 'Content-Type': fileMetadata.mimetype,
23 ETag: tag
24 })
25
26 if (request.headers['if-none-match'] === tag) {
27 response.status(304)
28 return;
29 }
30
31 return new StreamableFile(file);
32}The browser will always use the image from the cache with the above approach as long as it has the same id.
Even though we’ve marked the ETag as weak, it is up to us how do we handle it.
Automatically generated ETags in Express
Express creates ETags in some situations out of the box for us. Unfortunately, that does not happen when we use the StreamableFile class from NestJS. We omit the response.send method when we use readable streams and pipe them right into the response stream. Thanks to writing the logic of creating ETags, we now know that it usually requires us to create a content hash. This wouldn’t be possible when dealing with streams because Express starts sending the file before having all its content.
If you want to know more about streams, check out Node.js TypeScript #4. Paused and flowing modes of a readable stream
When we look under the hood of Express, we can see that it generates the ETag for us. Express can also take care of comparing the If-None-Match header for us.
1@Get(':userId/avatar')
2async getAvatar(
3 @Param('userId', ParseIntPipe) userId: number,
4 @Res() response: Response,
5 @Req() request: Request
6) {
7 const user = await this.usersService.getById(userId);
8 const fileId = user.avatarId;
9 if (!fileId) {
10 throw new NotFoundException();
11 }
12 const fileMetadata = await this.localFilesService.getFileById(user.avatarId);
13
14 const pathOnDisk = join(process.cwd(), fileMetadata.path);
15
16 const file = await readFile(pathOnDisk);
17
18 response.send(file);
19}When we do the above, we don’t omit the response.send method and allow Express to define the ETag automatically. By default, it generates weak ETags, but we can change that.
1import { NestFactory } from '@nestjs/core';
2import { AppModule } from './app.module';
3import { NestExpressApplication } from '@nestjs/platform-express';
4
5async function bootstrap() {
6 const app = await NestFactory.create<NestExpressApplication>(AppModule);
7
8 app.set('etag', 'strong');
9
10 await app.listen(3000);
11}
12bootstrap();To be able to call the app.set method, we need to use the NestExpressApplication interface.
We can also define our own function to generate the etag.
1import { NestFactory } from '@nestjs/core';
2import { AppModule } from './app.module';
3import { NestExpressApplication } from '@nestjs/platform-express';
4import * as etag from 'etag';
5
6async function bootstrap() {
7 const app = await NestFactory.create<NestExpressApplication>(AppModule, {
8 bufferLogs: true,
9 });
10
11 app.set('etag', (content: string | Buffer) => {
12 return etag(content);
13 });
14
15 await app.listen(3000);
16}
17bootstrap();Summary
In this article, we’ve learned what ETag is and how to use it to our advantage. This included both writing the logic by ourselves and getting to know how we can rely on Express to do that for us. We’ve also learned that there are both strong and weak ETags and how to tell Express which one we want. Knowing how ETag works can help us improve the performance and decrease the data transmitted over the network.