Data fetching with handlers in Deno - Performance & Optimization

Performance: Data fetching with handlers

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered.

Fetching data on every user interaction without caching

Deno

const cache = new Map();

async function handler(req) {
  if (cache.has('data')) {
    return new Response(JSON.stringify(cache.get('data')), { headers: { 'Content-Type': 'application/json' } });
  }
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  cache.set('data', data);
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
}

Caching data reduces network calls and response time, allowing faster rendering and interaction.

📈 Performance GainReduces network requests by 100% after first fetch, improving LCP and INP.

Fetching data on every user interaction without caching

Deno

async function handler(req) {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
}

Fetching data on every request causes repeated network delays and blocks rendering until data arrives.

📉 Performance CostBlocks rendering for each request, increasing LCP and INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch on every request	Minimal DOM nodes	Multiple reflows due to delayed data	High paint cost waiting for data	[X] Bad
Cached fetch with async handler	Minimal DOM nodes	Single reflow after first fetch	Lower paint cost with cached data	[OK] Good

Rendering Pipeline

Data fetching handlers impact the browser's critical rendering path by delaying content availability until data arrives. The stages of Style Calculation and Layout wait for data-dependent content, increasing blocking time.

→Data Fetching

→Style Calculation

→Layout

→Paint

⚠️ BottleneckData Fetching delays block Layout and Paint stages.

Core Web Vital Affected

LCP, INP

This concept affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered.

Optimization Tips

1Avoid fetching data synchronously on every request to reduce blocking.

2Use caching in handlers to minimize network delays and improve responsiveness.

3Implement asynchronous data fetching to allow progressive rendering and faster interaction.

Performance Quiz - 3 Questions

What is a main performance issue when fetching data on every user request without caching?

A It reduces the number of DOM nodes

B Repeated network delays block rendering and increase load time

C It improves paint speed

D It decreases bundle size

DevTools: Performance

How to check: Record a performance profile while triggering the data fetch handler. Look for long tasks or network delays blocking rendering.

What to look for: Check for long blocking times in the Main thread and network waterfall delays that increase LCP and INP.

Practice

1. What is the main purpose of using a handler function with serve in Deno for data fetching?

easy

A. To compile TypeScript code into JavaScript

B. To create a database connection automatically

C. To style the webpage with CSS

D. To process incoming requests and send back appropriate responses

Solution

1. Step 1: Understand the role of serve and handler

   The serve function listens for incoming HTTP requests and uses the handler function to decide how to respond.

2. Step 2: Identify the handler's purpose

   The handler processes each request and returns the correct response, such as data or status messages.

3. Final Answer:

   To process incoming requests and send back appropriate responses -> Option D

4. Quick Check:

   Handler processes requests = D [OK]

Hint: Handler functions decide responses for requests [OK]

Common Mistakes:

• Thinking handler creates database connections automatically
• Confusing handler with styling or compilation tasks
• Assuming serve compiles code

2. Which of the following is the correct syntax to start a basic HTTP server in Deno using a handler function named handler?

easy

A. handler.serve();

B. serve(handler);

C. serve = handler();

D. serve->handler();

Solution

1. Step 1: Recall the serve function usage

   In Deno, serve is called with the handler function as an argument to start the server.

2. Step 2: Check syntax correctness

   The correct syntax is serve(handler); which passes the handler function properly.

3. Final Answer:

   serve(handler); -> Option B

4. Quick Check:

   serve called with handler function = C [OK]

Hint: Call serve with handler function name only [OK]

Common Mistakes:

• Using assignment instead of function call
• Trying to call serve as a method on handler
• Using invalid arrow syntax

3. Given this handler code snippet in Deno:

async function handler(req) {
  if (req.url.endsWith('/hello')) {
    return new Response('Hello World');
  }
  return new Response('Not Found', { status: 404 });
}

What will the server respond when a request is made to http://localhost:8000/hello?

medium

A. A response with body 'Hello World'

B. A 404 Not Found response

C. An empty response with status 200

D. A runtime error occurs

Solution

1. Step 1: Analyze the URL condition in handler

   The handler checks if the request URL ends with '/hello'. If yes, it returns 'Hello World'.

2. Step 2: Match the request URL

   The request URL is exactly '/hello', so the condition is true and the response is 'Hello World'.

3. Final Answer:

   A response with body 'Hello World' -> Option A

4. Quick Check:

   URL ends with '/hello' returns 'Hello World' = B [OK]

Hint: Check URL endsWith condition to find response [OK]

Common Mistakes:

• Assuming 404 because of missing else
• Thinking response body is empty
• Expecting runtime error from this code

4. Identify the error in this Deno handler code snippet:

async function handler(req) {
  if (req.url === '/data') {
    const data = await fetch('https://api.example.com/data');
    return data.json();
  }
  return new Response('Not Found', { status: 404 });
}

medium

A. req.url should be req.path

B. Cannot use fetch inside handler

C. Missing await before data.json()

D. Response status 404 is invalid

Solution

1. Step 1: Understand fetch and response handling

   The fetch returns a Response object; calling data.json() returns a Promise that must be awaited.

2. Step 2: Identify missing await

   The code returns data.json() without awaiting it, which returns a Promise instead of a Response object.

3. Final Answer:

   Missing await before data.json() -> Option C

4. Quick Check:

   Await JSON parsing Promise = A [OK]

Hint: Always await async JSON parsing in handlers [OK]

Common Mistakes:

• Thinking fetch is disallowed in handlers
• Using req.path instead of req.url
• Believing 404 status is invalid

5. You want to create a Deno server that fetches user data from an external API only when the request URL is /user. Which handler function correctly fetches the JSON data and returns it as a JSON response?

hard

A. async function handler(req) {
if (req.url.endsWith('/user')) {
const response = await fetch('https://api.example.com/user');
const data = await response.json();
return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
}
return new Response('Not Found', { status: 404 });
}

B. async function handler(req) {
if (req.url === '/user') {
const data = fetch('https://api.example.com/user').json();
return new Response(data);
}
return new Response('Not Found');
}

C. function handler(req) {
if (req.url === '/user') {
const data = await fetch('https://api.example.com/user').json();
return new Response(JSON.stringify(data));
}
return new Response('Not Found');
}

D. async function handler(req) {
if (req.url.includes('/user')) {
const response = await fetch('https://api.example.com/user');
return response.json();
}
return new Response('Not Found', { status: 404 });
}

Solution

1. Step 1: Check correct async handling and URL matching

   async function handler(req) { if (req.url.endsWith('/user')) { const response = await fetch('https://api.example.com/user'); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); } return new Response('Not Found', { status: 404 }); } uses endsWith('/user') to match URL and awaits both fetch and response.json(), which is correct.

2. Step 2: Verify response formatting

   async function handler(req) { if (req.url.endsWith('/user')) { const response = await fetch('https://api.example.com/user'); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); } return new Response('Not Found', { status: 404 }); } returns a new Response with JSON string and correct Content-Type header, ensuring proper JSON response.

3. Final Answer:

   Option A correctly fetches and returns JSON data with proper async handling and headers -> Option A

4. Quick Check:

   Await fetch and json, set JSON header = A [OK]

Hint: Await fetch and json, set JSON content-type header [OK]

Common Mistakes:

• Not awaiting response.json()
• Returning raw Promise instead of Response
• Missing Content-Type header for JSON
• Using non-async function with await