'Next JS messing up responses for concurrent requests
I have a NextJs app that uses SSR for all pages (so no static pages to worry about caching). Inside App.getInitialProps I get the user-agent to make an educated guess about whether the requests comes from a mobile device or desktop to render the correct layout on the server. But I came across an issue where sometimes the mobile layout got rendered on the desktop and vice-versa.
After extensive debugging, I came to this conclusion: if two user agents make a request to the same URL, there is a change next will confuse the request and serve the wrong answers. For example, if there is a chrome and a safari user simultaneously requesting the same URL, there is a chance the chrome user will get served the response meant for the safari user. In this example it's a non issue, but if Next messes up a mobile and a desktop request, the server and client get out of sync and the hydration phase fails.
Has anyone come across an issue like that? I guess I am either doing something wrong inside my _app.js or in the next.config.js, but I can't find anything regarding an issue like that
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|