feat: conditional loading of external page components

src/components/common/SitePlayer.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 // @ts-ignore
-import APlayer from "aplayer"
-import "aplayer/dist/APlayer.min.css"
+import type APlayer from "aplayer"
 
 let siteAPlayer: APlayer
 
@@ -21,10 +20,13 @@ export interface AudioInfo {
   url: string
 }
 
-export const sitePlayerAddToPlaylist = (audio: AudioInfo) => {
+export const sitePlayerAddToPlaylist = async (audio: AudioInfo) => {
   // Check if player is initialized
   if (!siteAPlayer) {
-    // Initialize
+    // @ts-ignore
+    const APlayer = (await import("aplayer")).default
+    // @ts-ignore
+    await import("aplayer/dist/APlayer.min.css")
     siteAPlayer = new APlayer({
       container: document.getElementById(playerId),
       fixed: true,
@@ -35,9 +37,9 @@ export const sitePlayerAddToPlaylist = (audio: AudioInfo) => {
   siteAPlayer.list.add(audio)
 }
 
-export const sitePlayerPlayNow = (audio: AudioInfo) => {
+export const sitePlayerPlayNow = async (audio: AudioInfo) => {
   // Add to playlist
-  sitePlayerAddToPlaylist(audio)
+  await sitePlayerAddToPlaylist(audio)
   // Play now
   siteAPlayer.list.switch(siteAPlayer.list.audios.length - 1)
   siteAPlayer.play()

src/components/ui/DPlayer.tsx

@@ -1,12 +1,14 @@
 "use client"
 
-import { DPlayerProps, Player as RcDPlayer } from "rc-dplayer"
-import { memo } from "react"
+import dynamic from "next/dynamic"
+import { type DPlayerProps } from "rc-dplayer"
 import { ReactElement } from "rehype-react/lib"
 
 import { toGateway } from "~/lib/ipfs-parser"
 
-const DPlayer = memo(function DPlayer({
+const RcDPlayer = dynamic(async () => (await import("rc-dplayer")).Player)
+
+const DPlayer = function DPlayer({
   src,
   children,
   ...props
@@ -34,6 +36,6 @@ const DPlayer = memo(function DPlayer({
       <RcDPlayer src={src} {...props} />
     </div>
   )
-})
+}
 
 export default DPlayer

src/components/ui/GithubRepo.tsx

@@ -1,7 +1,9 @@
-import { memo } from "react"
+import dynamic from "next/dynamic"
 
-import { GithubRepo as ReactGithubRepo } from "@birdgg/react-github"
+const ReactGithubRepo = dynamic(
+  async () => (await import("@birdgg/react-github")).GithubRepo,
+)
 
-export default memo(function GithubRepo({ repo }: { repo: string }) {
+export default function GithubRepo({ repo }: { repo: string }) {
   return <ReactGithubRepo repo={repo} />
-})
+}

src/components/ui/Tweet.tsx

@@ -1,17 +1,18 @@
+import dynamic from "next/dynamic"
 import Image from "next/image"
-import { memo } from "react"
-import { Tweet as ReactTweet } from "react-tweet"
 import type { TweetComponents } from "react-tweet"
 
+const ReactTweet = dynamic(async () => (await import("react-tweet")).Tweet)
+
 const components: TweetComponents = {
   AvatarImg: (props) => <Image {...props} alt="avatar" />,
   MediaImg: (props) => <Image {...props} fill unoptimized alt="tweet-media" />,
 }
 
-export default memo(function Tweet({ id }: { id: string }) {
+export default function Tweet({ id }: { id: string }) {
   return (
     <div className="flex justify-center">
       <ReactTweet id={id} components={components} />
     </div>
   )
-})
+}

src/markdown/index.ts

@@ -56,9 +56,7 @@ const Tweet = dynamic(() => import("~/components/ui/Tweet"))
 const GithubRepo = dynamic(() => import("~/components/ui/GithubRepo"))
 const APlayer = dynamic(() => import("~/components/ui/APlayer"))
 
-const DPlayer = dynamic(() => import("~/components/ui/DPlayer"), {
-  ssr: false,
-})
+const DPlayer = dynamic(() => import("~/components/ui/DPlayer"))
 
 export type MarkdownEnv = {
   excerpt: string