Hybrid applications in NestJS - Performance & Optimization

Performance: Hybrid applications

MEDIUM IMPACT

Hybrid applications impact initial load speed and runtime responsiveness by combining server-side and client-side rendering.

Rendering UI with server and client code in a NestJS hybrid app

NestJS

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello from server' };
  }
}

// Client-side JS is code-split and lazy-loaded only when needed

Code splitting reduces initial bundle size, allowing faster server-rendered content display and quicker interactivity.

📈 Performance GainReduces blocking time by 200-400ms; improves LCP and INP

Rendering UI with server and client code in a NestJS hybrid app

NestJS

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello from server' };
  }
}

// Heavy client-side JS bundle loaded without code splitting

Sending a large client-side bundle without splitting delays page interactivity and blocks rendering.

📉 Performance CostBlocks rendering for 300-500ms on slow connections; increases LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side render only	Minimal DOM nodes initially	1 reflow on initial load	Low paint cost	[OK] Good
Hybrid with large JS bundle	Many DOM nodes hydrated	Multiple reflows during hydration	High paint cost due to JS execution	[X] Bad
Hybrid with code splitting	DOM nodes hydrated progressively	Single reflow per chunk	Moderate paint cost	[!] OK

Rendering Pipeline

Hybrid apps first render HTML on the server, sending it to the browser for quick display. Then client-side JavaScript loads to hydrate and add interactivity.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→JavaScript Execution

⚠️ BottleneckJavaScript Execution blocks interactivity until hydration completes.

Core Web Vital Affected

LCP

Hybrid applications impact initial load speed and runtime responsiveness by combining server-side and client-side rendering.

Optimization Tips

1Render critical UI on the server to speed up initial paint.

2Split client-side JavaScript to avoid blocking hydration.

3Lazy load non-essential scripts to improve interactivity.

Performance Quiz - 3 Questions

What is the main performance benefit of server-side rendering in a hybrid app?

A Reduced network requests

B Smaller JavaScript bundle size

C Faster initial content display (LCP)

D Improved CSS selector matching

DevTools: Performance

How to check: Record a page load and look for long 'scripting' tasks blocking main thread after first paint.

What to look for: Long JavaScript execution times delaying interactivity indicate hydration blocking.