Increasing RPS in Nuxt.js

Ryan Carter — Wed, 24 Dec 2025 11:00:31 +0000

JavaScript · Vue.js

We all know that Nuxt.js 2 (and in general any Node.js application using SSR) cannot handle high load without caching. In an average project, when SSR mode is enabled, the application usually handles only 20–30 RPS, which is extremely low.

The standard solution is to connect one or more caching packages and cache pages or requests. In general, this helps a lot.

However, on real projects I encountered several problems and wanted to stabilize the situation — to give the application at least a chance to run without SSR when needed.

Problems Encountered in Production

1. Slow API responses

Sometimes the backend does not anticipate certain scenarios, and in production API requests become slow. When SSR depends on such APIs, the entire page render slows down.

2. JavaScript errors in SSR mode

Errors may occur only during SSR, while in the browser everything works fine. These errors can appear due to carelessness or other reasons and can completely break server-side rendering.

3. High load or DDoS attacks

Under heavy load or during DDoS attacks, the server can hit memory or CPU limits. In such cases, SSR must be disabled and the client should receive a minimal HTML shell so the application can start in the browser.

SPA Rules Agreed with DevOps

After discussions with DevOps engineers, we defined several rules that an SPA application should follow:

Disable SSR when page rendering becomes slow and delegate rendering to the browser
Downgrade to SPA not globally, but only for problematic routes
Under heavy load, when rendering becomes slower and slower, track this state and temporarily disable SSR for the entire application, then automatically enable it again later
Force-disable SSR on pages where it is not needed to reduce server load
Add caching and store data in Redis

Automatic Solution

To implement all these rules, I wrote a module that performs all these actions automatically.

To achieve the maximum effect, it is recommended to additionally use a caching module (for example, nuxt-ssr-cache).

Installation

npm install @drozd/nuxt-performance

Configuration

Next, add the module configuration to nuxt.config.js:

module.exports = {
  performance: {
    // Log route render time
    renderRouteTimeCallback: (route, ms) => {
      console.log(`time render route: ${route} ${ms} ms`);
    },

    // Disable SSR for specific routes
    isOnlySPA: (route, _context) => {
      return route === '/personal';
    },

    // Maximum allowed render time for SSR (ms)
    maxRenderTime: 1000,

    // Number of SSR render attempts before disabling SSR
    maxAttemptSsr: 5,

    // Routes excluded from the module entirely
    excludeRoutes: /healthcheck/,

    // How long SSR is disabled for a specific route (ms)
    timeDisabledSsrWithRoute: 1000 * 60,

    // Interval for clearing the global slow-render counter
    clearSlowCounterIntervalTime: 1000 * 60 * 5,

    // Total number of slow requests before disabling SSR globally
    maxSlowCount: 50
  }

  // ...
};

Results

After implementing this module and enabling caching for all pages for 10 seconds, we achieved an ~15x increase in RPS — from 30 to ~500.

The exact result may vary depending on the resources allocated by system administrators.

Repository

Source code is available here:

https://github.com/chain-utils/nuxt-performance

Final Notes

If you have experience with performance optimizations or alternative approaches, feel free to share — it will be useful for everyone.

Introducing Vue DnD Kit: A New Drag-and-Drop Library for Vue 3

Ryan Carter — Wed, 24 Dec 2025 10:20:22 +0000

A new drag-and-drop library called Vue DnD Kit has been introduced for Vue 3 applications. The project aims to provide a modern, high-performance, and accessible solution for building complex drag-and-drop interfaces in Vue.

Vue DnD Kit is inspired by the popular dnd-kit library from the React ecosystem and brings similar concepts and flexibility to Vue developers.

Why Vue DnD Kit Was Created

The Vue ecosystem has long lacked a modern drag-and-drop solution that:

Is lightweight and fast
Works well with large datasets
Is flexible and composable
Provides full accessibility support

Many existing libraries are either outdated, hard to customize, or inefficient for complex UIs. Vue DnD Kit was created to solve these problems in a clean and future-proof way.

Core Principles

Vue DnD Kit is built around a few key ideas:

Composable API based on Vue 3 Composition API
High performance with minimal re-renders
Accessibility-first design
Full control over drag-and-drop behavior

Composable-Based API

Instead of relying on heavy components, Vue DnD Kit exposes composables that you can use directly inside your components.

import { useDraggable, useDroppable } from '@vue-dnd-kit/core'

const { elementRef, handleDragStart, isDragging } = useDraggable()

const { elementRef: dropRef, isOvered } = useDroppable({
  events: {
    onDrop: () => {
      console.log('Item dropped')
    }
  }
})

This approach keeps your components simple and fully reactive.

Keyboard and Accessibility Support

Accessibility is a core feature of Vue DnD Kit, not an afterthought.

The library supports full keyboard interaction:

W / A / S / D — move items
Space / Enter — pick up and drop
Escape — cancel drag operation
Tab — navigate between focusable elements

This makes drag-and-drop usable for keyboard users and screen readers.

Performance Characteristics

Vue DnD Kit is optimized for demanding interfaces:

Minimal DOM updates
Efficient state handling
Smooth interactions even with large lists
Reduced risk of memory leaks

These optimizations make it suitable for enterprise-scale applications.

Customization Options

The library provides deep customization:

Custom drag previews
Grouped draggable elements
Custom drop logic
Support for animations (CSS or JS-based)
Ability to override sensors and behaviors

You stay in full control of how drag-and-drop behaves.

Basic Drag-and-Drop Example

<template>
  <div class="container">
    <Draggable v-if="!isDropped">Drag me</Draggable>

    <Droppable @drop="handleDrop">
      <Draggable v-if="isDropped">
        Dropped here
      </Draggable>
    </Droppable>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isDropped = ref(false)

const handleDrop = () => {
  isDropped.value = true
}
</script>

Sortable List Example

Vue DnD Kit also supports sortable lists.

Draggable Item

<script setup lang="ts">
import { useDraggable } from '@vue-dnd-kit/core'
import { computed } from 'vue'

const props = defineProps({
  source: Array,
  index: Number
})

const { elementRef } = useDraggable({
  data: computed(() => ({
    source: props.source,
    index: props.index
  }))
})
</script>

Droppable List

<script setup lang="ts">
import { useDroppable, DnDOperations } from '@vue-dnd-kit/core'
import { ref } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])

const { elementRef } = useDroppable({
  events: {
    onDrop: (store) => {
      DnDOperations.applyTransfer(store)
    }
  }
})
</script>

Installation

npm install @vue-dnd-kit/core @vueuse/core

pnpm add @vue-dnd-kit/core @vueuse/core

Plugin Setup

import { createApp } from 'vue'
import App from './App.vue'
import VueDnDKit from '@vue-dnd-kit/core'

const app = createApp(App)
app.use(VueDnDKit)
app.mount('#app')

Final Notes

Vue DnD Kit brings a modern drag-and-drop experience to Vue 3. It focuses on performance, accessibility, and developer control, making it a strong choice for building complex interactive interfaces./

Repo
https://github.com/chain-utils/vue-dnd-kit

Forem: Ryan Carter

Increasing RPS in Nuxt.js

Problems Encountered in Production

1. Slow API responses

2. JavaScript errors in SSR mode

3. High load or DDoS attacks

SPA Rules Agreed with DevOps

Automatic Solution

Installation

Configuration

Results

Repository

https://github.com/chain-utils/nuxt-performance

Final Notes

Introducing Vue DnD Kit: A New Drag-and-Drop Library for Vue 3

Why Vue DnD Kit Was Created

Core Principles

Composable-Based API

Keyboard and Accessibility Support

Performance Characteristics

Customization Options

Basic Drag-and-Drop Example

Sortable List Example

Draggable Item

Droppable List

Installation

Plugin Setup

Final Notes