Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Hitting a server action in NextJs using an API for scriping or load testing purposes

Our application is built on NextJs, if we have to perform load testing by calling APIs, how we would be calling server actions using an API itself ?

Calling server actions require a next-action parameter in the request header, and how one can genereate one? Without this parameter, it will redirect to a page.

Here is an image below to see the next-action header.

enter image description here

The server action actually calls the POST method API with the same endpoint as the page.

Sure, we can copy the next-action header from the browser console, but we cannot do it everytime.
Also whenever a new build generates, it generates a different hash. So it is very difficult to replicate using an API for load testing or any scripting purposes.

Anyone has an idea how to achieve this?

I tried asking AI, but it was giving wrong answers giving random path in the next module, hence throwing error.

Tags:

2

Answers


  1. 0

    You could create a middleware that adds the required next-action header to requests coming from your load testing tool. This would require you to generate and store the correct hash somewhere accessible to the middleware.

    // middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Check if the request is coming from your load testing tool
  if (request.headers.get('X-Load-Test') === 'true') {
    const response = NextResponse.next()
    // Add the next-action header
    // You'll need to generate and store this hash somewhere
    response.headers.set('next-action', 'your-generated-hash')
    return response
  }
  return NextResponse.next()
}

export const config = {
  matcher: '/api/:path*',
}

    I found this solution hope it works.

    Login or Signup to reply.
  2. 0

    TLDR:

    You need to obtain and parse the actionId

    What are server actions

    First let’s go in depth on what server action is. In concept it is simple, a server action is a special function within Next.js (and React.js) that runs on the server when some type of user triggered event happens.

    In Next.js server action can be used both in server and client components. In a server component you can use it directly. Either way you must define it with the "use server" directive.

    Here is an example with server components:

    app/page.tsx

    export default function Page() {
  // Server Action
  async function create() {
    "use server"
    // Mutate data
  }
 
  return '...'
}

    In client components you must define them in a separate file:

    actions/actions.ts

    'use server'
 
export async function create() {
   // Mutate data
}

    To access data from say a form submission you can pass an form submission event to the action as well as action prop to the component:

    export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'
 
    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }
 
    // mutate data
    // revalidate cache
  }
 
  return <form action={createInvoice}>...</form>
}

    These examples were provided and adapted from the Next.js docs (License MIT)

    Sending a request

    In the last section we have established a few baselines we need to mock in order to test these actions:

    • The FormData
    • The page of the action
    • Other HTTP headers

    To find these let’s take a look at how Next.js server actions work under the hood…

    To run server actions Next.js generates server endpoints that accept POST requests. So in short here is how I would do it:

    • Create a getActionId function that only runs when process.env.loadTest has a value. This function should be called in the server action you want to test
    • Inside that function have it store the actionId in a plaintext file
    • Create a GET endpoint to return the actionId and send a request to it in your load test calls
    • Finnaly, send the POST request like before with the new next-action header as the value returned from this function

    If you are using a specific load testing solution I can provide some code for you to get started with!

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search