Published On

Next.js - dynamic import

nextjs dynamic

Nextjs에서 아래와 같이 import를 하게 되는 경우, import { component } from '@/somewhere';

당장 필요한 component가 아닌 경우에도 일단 파일을 다운로드받게 됩니다.

당장 필요한 components가 아닌 경우, dynamic import를 하여 최적화 할 수 있습니다.

page.tsxjavascript
'use client'
import dynamic from "next/dynamic";

// CSR으로 실행, loading message
const nameOfComponent = dynamic(import("@/somewhere"), {
  ssr: false, loading: ()=> (<span>Loading ...</span>)
})

export default function Com (){
  const [show, setShow] = useState(false)
  const showme=()=>{
    setShow(!show)
  }
  return (
    <>
      <div>
        content ...
      </div>
      <div onClick={showme}>
        <nameOfComponent/>
      </div>
    </>
  )
}
page.tsxjavascript
//만약, Suspense를 사용하고 있다면 아래처럼 사용하면 됩니다.
'use client'
import dynamic from "next/dynamic";

// CSR으로 실행, dynamic에 suspense 사용.
const nameOfComponent = dynamic(import("@/somewhere"), {
  ssr: false, suspense: true,
})

export default function Com (){
  const [show, setShow] = useState(false)
  const showme=()=>{
    setShow(!show)
  }
  return (
    <>
      <div>
        content ...
      </div>
      <div onClick={showme}>
        <Suspense fallback="loading message ...">
          <nameOfComponent/>
        </Suspense>
      </div>
    </>
  )
}

Script

_app.Or_document.tsxjavascript
import Script from 'next/Script'

<Script src="https://sdfsdfads" strategy="afterInteractive" />
//beforeInteractive - 페이지가 전부 불러와지기 전에 script를 불러오는 전략
//afterInteractive  - 페이지가 전부 불러와진 후 script를 불러오는 전략(보통 이 옵션을 사용 default)
//lazyOnLoad        - 모든 데이터나 소스를 불러온 후 스크릷트를 불러옴

<Script src="https://sdfsdfads" onLoad={()=>{ someFunction }}/>
//onLoad는 스크립트가 실행된 후 실행되는 옵션입니다.

다음 포스트

Prisma Client

연관된 포스트 구경가기

1. Next.js 란?2. Next.js - middleware3. Next.js - route handler4. Next.js Pages Router5. Next.js(pages-router) - data fetching6. Next.js - dynamic import7. Next.js에서 Head 컴포넌트 사용 방법8. Next.js의 폴더 구조 분석9. Next.js에서 메타데이터 다루기10. Next.js(app-router) - data fetching11. Next.js runtime12. Next.js 패러렐 라우트, 인터셉팅 라우트13. Next.js에서 Font를 설정하는 방법14. Next.js - Server Actions15. Next.js Image 컴포넌트16. Next.js 빌드 과정과 Webpack, Babel17. Next.js Configuration: next.config.mjs18. Next.js 커스텀 서버19. Next.js의 렌더링 과정
간략히