[Next 14] 외부 라이브러리, 런타임(Runtime), CSS Style

📝외부 라이브러리 종류 (공식)

server-only라는 패키지를 이용해 서버에서만 실행시킬 수 있게 할 수 있다

import 'server-only'
 
export async function getData() {
  const res = await fetch('<https://external-service.com/data>', {
    headers: {
      authorization: process.env.API_KEY,
    },
  })
 
  return res.json()
}

 

📝외부 라이브러리 사용시 주의점

/** carousel.tsx **/
'use client'
 
import { Carousel } from 'acme-carousel'
 
export default Carousel

/** page.tsx **/
import Carousel from './carousel'
 
export default function Page() {
  return (
    <div>
      <p>View pictures</p>
 
      {/*  Works, since Carousel is a Client Component */}
      <Carousel />
    </div>
  )
}

클라이언트 사이드 렌더링이 필요한 라이브러리(Carousel은 외부 라이브러리 컴포넌트)일 경우 이런식으로 처리가 가능하다 → 이렇게 사용하면 서버 컴포넌트 내에서 사용이 가능하다

 

클라이언트 구성 요소 내에서 사용할 가능성이 높으므로 대부분의 타사 구성 요소를 래핑할 필요가 없을 것으로 예상되지만 컨텍스트 제공자(리덕스, ThemeContext 따위)의 경우 어쩔 수 없이 /app/layout.tsx에서 ‘use client’를 명시해야한다 → 여기에 use client명시한다고 하위 페이지들이 전부 client side render가 되는 건 아니다

 

 

📝런타임

• Edge 런타임
  • Edge Runtime의 속도는 최소한의 리소스 사용으로 인해 발생하지만 많은 시나리오에서 제한될 수 있습니다
  • Vercel의 Edge 런타임에서 실행되는 코드는 1MB에서 4MB 사이를 초과할 수 없습니다., 이 제한에는 가져온 패키지, 글꼴 및 파일이 포함되며 배포 인프라에 따라 달라집니다.
• Node.js 런타임
  • Node.js API와 이에 의존하는 모든 npm 패키지에 액세스할 수 있습니다. 그러나 Edge 런타임을 사용하는 만큼 시작하는 것이 빠르지는 않습니다.
  • Next.js 애플리케이션을 Node.js 서버에 배포하려면 인프라를 관리, 확장 및 구성해야 합니다
• 서버리스 Node.js
  • Vercel의 서버리스 기능을 사용하면 전체 코드 크기는 50MB입니다 가져온 패키지, 글꼴 및 파일을 포함합니다 Vercel에서 지원한 거이기 때문에 가장 이상적이라고 이야기한다

 

어떤 런타임을 고르냐에 따라 성능 및 지원하는게 다르다

 

📝Style

Tailwind 사용을 권장하며 다양한 적용 방법들이 존재한다

• Global CSS
  • app/global.css에 작성
• CSS Modules
• Tailwind CSS
• Sass
• CSS-in-JS