Just wondering how best to fix the following issue:
- I navigate to a dynamic route, mywebsite.com/foo/1, for dynamic route src/pages/foo/[id].tsx
- I see the "root document", ie, mywebsite.com rendered
- A split second later the JS code loads and renders the template at src/pages/foo/[id].tsx

This happens because I have configured my static file server to serve the root document if a file doesnt exist. So, my browser queries mywebsite.com/foo/1, the static file server sees foo/1 doesnt exist, and it serves index.html instead, after which the browser loads the Next.js client code, which notices the route and the DOM is updated to show the correct template.

What's the best way to fix this? Should I make the "root document" a blank page or something? I can't pre-render this path because the foo-id is dynamic (ie, I don't want to generate a foo/1 file so the static file server serves that instead).