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.

Practice

1. What is a hybrid application in NestJS?

easy

A. An app that combines HTTP and microservices in one project

B. An app that only uses HTTP controllers

C. An app that only uses microservices

D. An app that runs on multiple servers

Solution

1. Step 1: Understand NestJS application types

   NestJS apps can be HTTP-based, microservice-based, or both combined.

2. Step 2: Define hybrid application

   A hybrid app combines HTTP and microservices in one project to handle both communication types.

3. Final Answer:

   An app that combines HTTP and microservices in one project -> Option A

4. Quick Check:

   Hybrid app = HTTP + microservices [OK]

Hint: Hybrid means mixing HTTP and microservices in one app [OK]

Common Mistakes:

• Thinking hybrid means multiple servers
• Confusing hybrid with only HTTP or only microservices
• Assuming hybrid apps are separate projects

2. Which method is used to add microservice support in a NestJS hybrid application?

easy

A. connectMicroservice()

B. createMicroservice()

C. addMicroservice()

D. useMicroservice()

Solution

1. Step 1: Recall NestJS microservice integration method

   The official NestJS method to add microservices to an app is connectMicroservice().

2. Step 2: Verify method names

   Other options like createMicroservice(), addMicroservice(), or useMicroservice() are not valid NestJS methods.

3. Final Answer:

   connectMicroservice() -> Option A

4. Quick Check:

   Use connectMicroservice() to add microservices [OK]

Hint: Remember: connectMicroservice() connects microservices [OK]

Common Mistakes:

• Using createMicroservice() which does not exist
• Confusing with addMicroservice() or useMicroservice()
• Trying to add microservices without this method

3. Given this NestJS hybrid app code snippet, what will be the output when the app starts?

const app = await NestFactory.create(AppModule);
app.connectMicroservice({ transport: Transport.TCP });
await app.startAllMicroservices();
await app.listen(3000);
console.log('App is running');

medium

A. App listens on port 3000 but microservices do not start

B. App is running (and microservices start listening)

C. Error: connectMicroservice is not a function

D. App crashes due to missing microservice configuration

Solution

1. Step 1: Analyze microservice connection

   The code calls connectMicroservice with TCP transport, which is valid to add microservices.

2. Step 2: Check microservice start and app listen

   startAllMicroservices() starts microservices, then app.listen(3000) starts HTTP server. Console logs 'App is running'.

3. Final Answer:

   App is running (and microservices start listening) -> Option B

4. Quick Check:

   connectMicroservice + startAllMicroservices + listen = running app [OK]

Hint: connectMicroservice + startAllMicroservices means microservices run [OK]

Common Mistakes:

• Thinking microservices start automatically without startAllMicroservices()
• Confusing connectMicroservice with createMicroservice
• Assuming app.listen blocks microservices

4. Identify the error in this NestJS hybrid app setup:

const app = await NestFactory.create(AppModule);
app.connectMicroservice({ transport: Transport.REDIS });
await app.listen(3000);
await app.startAllMicroservices();

medium

A. AppModule cannot be used with microservices

B. connectMicroservice() does not accept transport option

C. startAllMicroservices() must be called before app.listen()

D. Missing await before connectMicroservice()

Solution

1. Step 1: Check method call order

   In NestJS, microservices must be started before the HTTP server listens, so startAllMicroservices() should be before app.listen().

2. Step 2: Validate other options

   connectMicroservice() accepts transport option; AppModule supports microservices; connectMicroservice() is synchronous, no await needed.

3. Final Answer:

   startAllMicroservices() must be called before app.listen() -> Option C

4. Quick Check:

   Start microservices before HTTP listen [OK]

Hint: Call startAllMicroservices() before app.listen() [OK]

Common Mistakes:

• Calling startAllMicroservices() after app.listen()
• Adding await to connectMicroservice()
• Thinking transport option is invalid

5. You want to build a NestJS hybrid app that handles HTTP requests and listens to RabbitMQ messages. Which steps correctly set up the microservice part?

hard

A. Use connectMicroservice({ transport: Transport.TCP }) and call startAllMicroservices() after app.listen()

B. Use createMicroservice({ transport: Transport.RMQ }) and call app.listen() before starting microservices

C. Add RabbitMQ config in AppModule imports and call app.listen() only

D. Use connectMicroservice({ transport: Transport.RMQ, options: { urls: ['amqp://localhost'], queue: 'main_queue' } }), then call startAllMicroservices() before app.listen()

Solution

1. Step 1: Choose correct microservice setup for RabbitMQ

   connectMicroservice() with Transport.RMQ and proper options (urls, queue) is the correct way to add RabbitMQ microservice.

2. Step 2: Call startAllMicroservices() before app.listen()

   Microservices must start before HTTP server listens to ensure both run properly.

3. Final Answer:

   Use connectMicroservice({ transport: Transport.RMQ, options: { urls: ['amqp://localhost'], queue: 'main_queue' } }), then call startAllMicroservices() before app.listen() -> Option D

4. Quick Check:

   connectMicroservice + RMQ options + startAllMicroservices before listen [OK]

Hint: Set RMQ options in connectMicroservice and start microservices first [OK]

Common Mistakes:

• Using createMicroservice() which is not a NestFactory method
• Calling app.listen() before starting microservices
• Using wrong transport type for RabbitMQ
• Not providing RabbitMQ connection options