javascript - NextJS SSR Động: False bị kẹt ở trạng thái tải trên Thiết bị Di động

Vấn đề:

Việc import động của Next JS bị kẹt ở trạng thái đang tải trên trình duyệt thiết bị di động (trình duyệt sử dụng: Google Chrome và Safari trên iOS). Trong khi đó, nó hoạt động hoàn hảo trên Google Chrome và Mozilla trên máy tính để bàn. Tôi cũng đang sử dụng next-PWA với cấu hình mặc định. Liệu có thể nguyên nhân là do next-PWA không?

Đoạn Mã:

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>);
}

Xuất trên Thiết bị Di động

The component is loading

Hiển thị trên Trình duyệt Máy tính để bàn

Hello from Component

Câu trả lời #1

Lỗi không phải do Next Dynamic mà là do trang HTTP không lấy được tài nguyên navigator trên các trình duyệt di động.

Chỉnh sửa: Trên các thiết bị di động, nó yêu cầu HTTPS thay vì HTTP. Do đó, khi tôi chạy trong mạng cục bộ, nó sử dụng HTTP, để bật HTTPS trong mạng cục bộ của bạn, bạn có thể xem: https://web.dev/articles/how-to-use-local-https