My goal is to move specifc service from older technology (Java + tomcat + jsp) to next.js.
Requirements:
Page must be generated as SSR (every user sees different data)
Page is large (over 800kB, over 2000 DOM elements)
I cannot use lazy loading - all content must be served at once (required by SEO dep.)
I have an app using Next.js 13.5.5, node 18.16.1.
Page generation looks like this:
I call one backend endpoint (just for tests it returns static data - response time < 30ms)
Based on this data I generate ~2000 divs (each one has image <img> and title <p> below
THATS ALL WHAT I HAVE IN MY CODE
I use fasthttploader to benchmark my app.
When I run it with 10 clients and 10 requests per second the result I get is very weak (~1,5 - 2 sec).
The same paged servered on tomcat - for 30 req/sec (3 TIMES MORE !) the result I get is very good (~ 0,10 - 0,20 sec).
To be honest I was expecting more from next.js.
I have been working on it for the last 3 days - trying diffrent next.js versions, different node.js versions etc with no success.
The only thing I have noticed: for > 1000 images using <ing> instance of next/Image gives noticable gain in performace but still for this specific case I hit the wall with 10 requests.
I have also used opentelemetry in my app, run in on localhost, when I call my page (no stress - test - just one request from my machine) the response time is about 200-400ms.
In JaegerUI I can`t see much: static endpoint response is < 5ms, there is quite a lot of time spent on render route (app).
Am I missing something? Is there something I can tweak in node or next.js?
Mayby next.js is not designed for large pages which cannot be served as SSG?
Any suggestions will help me a lot and save my day.