Our Next js app not works on low end devices
Hi, So we have a next js app. Our app primary user base are blue collar employees. When we test in our phones it works without any lag, and results get submitted instantly. But we have regularly received complaints from factory about it heating thier phone,…
Hi, So we have a next js app. Our app primary user base are blue collar employees. When we test in our phones it works without any lag, and results get submitted instantly. But we have regularly received complaints from factory about it heating thier phone, and it being very slow. Page auto refreshes . So, we have right now same app for blue collars as we have for their managers, and I am thinking to split it. User has to scan a QR, we have used a js library. Post scanning they can approve / reject a checkpoint and whatever they choose they will have to click a picture and then they can edit it if they want and upload it. In our testing device. After editing image it gets uploaded in like 1-2 seconds.it calls a presigned S3 url and once it returns success then he calls a api and submits the key. We are not uploading through our server. But factory called me and reported me that it's not getting uploaded, so initially when I checked with them on video call it felt like so because they clicked on it multiple times but nothing happened. But next time when I called I asked them to wait and this time it worked and it took 40 seconds. They internet speed was 210 Mbps. And sometimes even when they click on the submit instead of submitting page just auto refreshes. I feel all of this is happening because of poor memory management in their phones. And as our testing device barely 10 devices those real devices have 100 of apps all consuming memory in background and that might be killing the app by browser. So we are ready to rebuild this from scratch but which framework should we choose ? Or should we write completely using vanilla js? We need two things image editor, qr scanner. Library using right now. Qr- https://github.com/antfu/qr-scanner-wechat Image editor - Native made through claude. Also, our qr scanner is not that good many times it's not able to read qr properly. Due to the nature of business qrs are not properly in shape. They are twisted / torn / scratched. This particular webapl has been able to actually scan all of our qr codes without any problem. But 5000k for each year is high for us. Is there any open source that can match it? https://scanbot.io/qr-code-scanner-online/ From our end we have literally tried all the library we could find through AI and Google. Thanks
已收录讨论
Did you do some memory profiling to find out which part is using the most memory? It could end up being just one component and fully fixable. Hearing about your issue though, if you cannot fix it I'd just go with vanilla.
Nope, just guess. Never did profiling. But I will learn and do it. What other things could be the reason?
Without profiling you're shooting blind. Do it first and you'll know where the problem is. Very easy to do.
You are right. I agree, but it's impossible to convince ceo. It's very complicated to explain here but it's way out of our budget. Even I myself am not convinced, this price 5k could be good for enterprise but for small medium businesses this is very high. Our user base is roughly 15 users per month for scanning, rest are doing desk job. And sadly they don't have any cheap plan.
Great suggestions, along with idempotency I will be implementing these as well. Thanks
Web worker? Will read about it. Thanks
Thanks. My qr is 12mm in size. I am using v5, level h which I guess is highest. I can't just increase my qr size. Our client will not allow that. They wanted us to keep it 8 mm Thanks for image handling suggestions I will look into them.
At 12x12mm, minimizing payload would be a significant optimization, if you're not already using V1-H.
One reason could complete lack of skill. Are you a carpenter by chance?
Why is the upload button not disabled while pending the request? Are you providing any feedback to the user on button click so they know something is happening?
I'm not really an expert on react so I can't tell you anything else.
The vague and inaccurate description of the tech you use tells me that it’s not the Next.js problem, but some code going rogue. Moving that code off Next to vanilla won’t fix the issue (because Next clearly isn’t the problem). Profile your app, see where memory goes. I wouldn’t be surprised if the issue is an easy fix.
Learning to measure perf saves you a lot of pain here. It can be a lot, but it's better than shooting in the dark.
Why not use a well‑defined, tested library even if it costs money? It seems like the scan functionality is core to the app. Am I wrong?
Do you have control over the QRs? Boosting error correction level makes a big difference for real world environments. The OSS QR scanners are generally good enough and bigger gains are from controlling QRs In addition to what others have mentioned, consider: compressing/downscaling (off the main thread e.g. using createImageBitmap) before passing it to editor, splitting out QR scanner as standalone PWA (e.g. Vite/React) for bundle size/overhead, and Web Worker / OffscreenCanvas
Don't go vanilla JS for this — with an image editor and a scanner you'll just end up building your own half-broken framework. Use React, or Vue since you already know it. Pick whatever your team can actually maintain. On the QR scanner: reading twisted, torn, and scratched codes is the hard part, and that's exactly what paid tools like Scanbot are good at. It's heavy computer vision stuff, not just swapping one library for another. Open source probably won't fully match it for damaged codes, so I'd be honest with yourself about that. But before paying 5k a year, try this first: use OpenCV's WeChatQRCode module directly. The antfu library wraps an older version, and the full OpenCV one usually works better. And the big one — clean up the image before you scan it. Convert to grayscale, boost the contrast, and try to straighten out the twist. You can even run the scan on a few versions of the image (normal, high-contrast, straightened) and just take whichever one works. Most of the time the scanner fails because the image is bad, not because the code reader is weak. Fix the image first and open source gets a lot closer.
Przeglądarki internetowe jak jakaś karta jest nieaktywna usypiają wykonywanie JS. Może jakiś token wygasa a aplikacja w przypadku błędu komunikacji robi refresh? Może webworker rozwiązał by problem?