DEV Community: Jona

How to horizontally scale a NextJS application using PM2

Jona — Sun, 02 Jul 2023 09:39:15 +0000

Introduction

NodeJS server is single threaded in nature as such depending on the application there is only a finite amount of requests that can be handled by a single instance of the application.
If the application is CPU intensive then the number of requests that can be handled by a single instance of the application will be even lower.

Hence there are use cases where you would need to horizontally scale the application to handle more requests.

In this article we will cover how to horizontally scale a NextJS application using PM2.

What is horizontally scaling?

Horizontal scaling, often referred to as scaling out, is the process of adding more machines or nodes to a system to improve performance and capacity.

In our case we will be adding more instances of a NextJS application using PM2 process manager.

What is PM2?

PM2 is a daemon process manager that will help you manage and keep your application online 24/7.
It has a lot of features that will help you in the process of deploying and maintaining your application.

Additionally PM2 allows you to run a nodeJS server in cluster mode.
Which dramatically improves the performance of your application and allows you to scale your application horizontally.

Implementation

Setup a NextJS project

npx create-next-app@latest my-next-app

Install PM2 globally.

npm install pm2 -g

Create a ecosystem.config.js file in the root of the project.

pm2 ecosystem

Setup your ecosystem file as follows.

module.exports = {
    apps: [
        {
            script: 'npm run start',
            instances: 3,
            name: 'my-next-app',
        },
    ],
}

Further ecosystem configuration options can be found here.

Start the application using PM2.

pm2 start

You can check the status of the application using the following command.

pm2 monit

SSG + ISR

One last caveat to keep in mind is that if you are using SSG with ISR
then you will need to configure NextJS to stop using in memory cache and use file system cache instead.

Add the following in next.config.js file.

module.exports = {
    experimental: {
        // Defaults to 50MB
        isrMemoryCacheSize: 0,
    },
}

Conclusion

In this article we covered how to horizontally scale a NextJS application using PM2.
We also covered how to configure NextJS to use file system cache instead of in memory cache when using SSG with ISR.

Also we configured pm2 to run 3 instances of the application.
Similarly you can configure pm2 to run as many instances as you need.

Guide to Running a Node Server in Nx Monorepo using PM2 Process Manager

Jona — Sun, 25 Jun 2023 11:01:52 +0000

Introduction

Additionally PM2 allows you to run a nodeJS server in cluster mode.
Which dramatically improves the performance of your application and allows you to scale your application horizontally.

In this article we will cover the following:

Setting up a Nx monorepo
Setting up a NestJS project within the Nx Monorepo.
Running NestJS with PM2 using Nx-PM2-Plugin.

It must be noted that the same approach can be used for any nodeJS project within Nx.

1. Setting up a Nx Monorepo

In this section we will be setting up a Nx monorepo using the integrated mode scheme.

npx create-nx-workspace@latest myorg --preset=ts

A comprehensive guide to setting up the Nx monorepo can be found here;

2. Setting up NestJS

Nx provides a NestJS schematics to setup a NestJS project within the monorepo.

npm install -D @nx/nest
npx nx g @nx/nest:app my-nest-app

A comprehensive guide to setup NestJS within Nx can be found here

3.Running NestJS with PM2

Install PM2 globally.

npm install pm2 -g

Install Nx-PM2-Plugin

npm i nx-pm2-plugin

Add the following task to project.json of the NestJS project.

"pm2": {
    "executor": "nx-pm2-plugin:pm2-executor",
    "options": {
        "command": "my-nest-app:serve:production",
        "name": "example"
    }
}

You can now run the task using the following command:

npx nx run my-nest-app:pm2

You can monitor the service instances using the following command:

pm2 monit

Conclusion

PM2 is a daemon process manager that will help you manage and keep your application online 24/7. It has a lot of features that will help you in the process of deploying and maintaining your application.

Mutually exclusive experiments in Google Optimize

Jona — Thu, 24 Nov 2022 12:26:50 +0000

Introduction

One of the Achilles heels of Google optimize as an AB testing platform is how they bucket users into experiments. Users are often placed into multiple experiments at the same time without the possibility of natively having the users bucketed into only a single experiment at a time. In this post I will highlight an approach to ensure that experiments are mutually exclusive i.e. a user will only be placed in a single experiment at a time.

Siloing Your Users.

When a user visits your website, we execute the following steps:

Check if the guest has already been siloed, if not proceed.
Generate a random number between 1-100.
Create a cookie and store the number generated in the previous step.

if(!window.vuCookies.get('vu.silo')) {
window.vuCookies.set('vu.silo', Math.floor(Math.random() * 100)+1, 365);
}

*Note:

The window.vuCookies is custom code.
This code must be placed before the Google Optimize script.

Audience Targeting

Set the audience targeting condition on the experiment level.

Conclusion

In order to have accurate AB testing results its paramount that a user is not bucketed into multiple experiments. The approach outlined in this article will ensures tests remains mutually exclusive.

Should layout markup be a component in React?

Jona — Tue, 19 Oct 2021 16:23:35 +0000

Do layout markup need to be a component of its own?

For example

Do we need a Card component that adds a border and padding to a card like soo

....

Instead of using a pure html + css solution like

...

I really like the second approach and I feel like lesser components are a better solution from a performance perspective.

On the other hand the second solution follows atomic design.

DEV Community: Jona

How to horizontally scale a NextJS application using PM2

Introduction

What is horizontally scaling?

What is PM2?

Implementation

SSG + ISR

Conclusion

Further reading

Guide to Running a Node Server in Nx Monorepo using PM2 Process Manager

Introduction

1. Setting up a Nx Monorepo

2. Setting up NestJS

3.Running NestJS with PM2

Conclusion

Mutually exclusive experiments in Google Optimize

Introduction

Siloing Your Users.

Audience Targeting

Conclusion

Should layout markup be a component in React?