Search code examples
javascripttypescriptnext.jsnext-pwa

NextJS Dynamic SSR: False stuck on loading in Mobile Devices

Problem:

The Next JS dynamic import is stuck on loading on mobile device browser (used browser: Google Chrome and Safari on IOS.) Whereas it is working perfectly on Google Chrome and Mozilla on Desktop. I am also using next-PWA on the default configuration. Could it be due to next-PWA?

Code Snippet:

import dynamic from "next/dynamic";
import { useMemo } from "react";

export default function Main() {

const Component = useMemo(
    () =>
      dynamic(() => import("@components/Component"), {
        loading: () => <p>The component is loading</p>,
        ssr: false,
      }),
    [],
  );

  return(<div><Component/></div>);
}

Output on Mobile Device

The component is loading

Output on Desktop Browser

Hello from Component
Solution

  • The fault was not of the Next Dynamic rather than it was due to HTTP site not getting navigator resources in mobile browsers.

    Edit: In mobile devices it required HTTPS instead of HTTP. Hence, when I was running in local network it was in HTTP, to enable HTTPS in your local network you can view: https://web.dev/articles/how-to-use-local-https