Server routes and API in Vue - Performance & Optimization

Performance: Server routes and API

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by controlling how data is fetched and served from the backend.

Fetching data for a Vue app from the backend

Vue

app.get('/api/data', (req, res) => {
  const { page = 1, limit = 20 } = req.query;
  // Fetch only needed data with pagination
  const data = database.getPage(page, limit);
  res.json(data);
});

Pagination limits data size, reducing response time and improving UI responsiveness.

📈 Performance GainReduces blocking time to under 100ms; lowers payload size by 80% or more

Fetching data for a Vue app from the backend

Vue

app.get('/api/data', (req, res) => {
  // Fetch all data without pagination or filtering
  const data = database.getAll();
  res.json(data);
});

Fetching all data at once causes large payloads and slow responses, blocking the UI.

📉 Performance CostBlocks rendering for 200-500ms on large datasets; increases payload size due to large JSON payloads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch all data at once	N/A	N/A	High due to large data rendering	[X] Bad
Paginated API requests	N/A	N/A	Low due to smaller data chunks	[OK] Good

Rendering Pipeline

Server routes handle requests and send data to the client. Efficient APIs reduce waiting time before the browser can render or update content.

→Network

→JavaScript Execution

→Rendering

⚠️ BottleneckNetwork latency and server processing time delay data availability for rendering.

Core Web Vital Affected

INP

This concept affects page load speed and interaction responsiveness by controlling how data is fetched and served from the backend.

Optimization Tips

1Limit API response size with pagination or filtering.

2Cache frequent data on the server to reduce processing time.

3Avoid sending unnecessary data to improve response speed.

Performance Quiz - 3 Questions

What is a key performance benefit of paginating API responses?

A Increases server CPU usage

B Reduces data size sent to client, speeding up response

C Makes the API more complex without speed benefits

D Blocks rendering longer due to multiple requests

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by XHR/fetch, and observe API request size and response time.

What to look for: Look for large payload sizes and long response times indicating slow or inefficient API routes.