gyumin_2.log

Next.js - Pre-rendering and Data Fetching

Thu, 16 Nov 2023 03:44:05 GMT

Pre-rendering

기본적으로 next.js는 모든 페이지를 pre-rendering 한다. next.js는 클라이언트 사이드 js에 의해 모든 페이지가 렌더링 되는 것 대신 사전에 모든 페이지의 html을 생성한다. pre-rendering은 더 나은 성능과 SEO를 제공한다.
생성된 각 HTML은 해당 페이지에 필요한 최소 JavaScript 코드와 연결됩니다. 페이지가 브라우저에 의해 로드될 때, 해당 페이지의 js가 실행되고 해당 페이지를 완전이 인터렉티브하게 만드는데, 이를 hydration이라고 합니다.

pre-rendering vs no pre-rendering

pre-rendering
1. initial load : pre-rendering 된 HTML을 화면에 표시
2. JS 로드
3. hydration : 리액트 컴포넌트가 초기화되고, 앱이 인터렉티브 됨
  - Link 컴포넌트 같은 인터랙티브 컴포넌트가 있다면, js가 로드된 후 활성화 됨
no pre-rendering
1. initial load : 앱이 화면에 렌더링 되지 않음
2. JS 로드
3. hydration : 리액트 컴포넌트가 초기화되고, 앱이 인터렉티브 됨

Pre-rendering 종류

next.js는 두 가지 유형의 pre-rendering이 있다.
Static Generation
- 빌드타임에 html이 생성되며 모든 요청 마다 재사용된다.
- next.js 에서 퍼포먼스를 위해 권장하는 방식
- 정적으로 생성된 페이지들은 CDN에 캐시 가능
- 마케팅 페이지, 블로그 포스트, 이커머스 상품 리스트, 도움말 문서 등에 적합
- 유저의 요청 전에 pre-render 해야한다면 Static Generation 방식 추천
Server-side Rendering
- 요청 마다 html이 생성된다.
- 사용자의 요청 전에 pre-render 하면 안되는 경우에 적합. 가령 대시보드처럼 데이터가 자주 업데이트 되거나 페이지가 매 요청마다 달라지는 경우에 적합
- Static Generation 방식보다 느리지만 항상 최신 정보를 보여준다.

💡 개발 모드에서 모든 페이지는 Static Generation 방식의 pre-rendering을 사용하지만 개발 편의성을 위해 모든 요청마다 pre-rendering된다.

next.js에서는 개발자가 두 유형의 pre-rendering 중 원하는 걸 선택해서 페이지 별로 개발할 수 있습니다. 개발자는 대부분의 페이지는 Static Generation으로 나머지 페이지는 Server-side Rendering을 사용하여 하이브리드 Next.js 앱을 만들 수 있습니다. = 대략 페이지별로 둘 다 혼용해서 쓸 수 있다는 이야기

Fetching Data at Build Time

Static Generation 방식은 서버의 데이터가 필요할 수도 있고 필요하지 않을 수도 있습니다. 그러나 대부분의 페이지는 서버의 데이터를 필요로합니다. Static Generation 방식에서 서버의 데이터를 가져와 정적 페이지를 만들고자 할 경우에는 getStaticProps 메소드를 사용합니다.
빌드타임에 파일 시스템에 접근하거나, 외부 API를 호출하거나, DB에 접근하고자 할 경우에 getStaticProps를 사용합니다. 여기서 가장 중요한 것은 페이지를 요청할 때가 아니라 앱 빌드 타임에 위 내용이 필요할 경우입니다.

getStaticProps 기본 사용 법

페이지 컴포넌트를 export 할 때 아래와 같이 async 키워드를 붙인 getStaticProps를 같이 export 한다

export default function Home(props) {
  return <>...
}

export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...

// The value of the `props` key will be
//  passed to the `Home` component
return {
  props: ...
}
}

getStaticProps 함수는 빌드 타임에 실행되며 함수 내부에서 외부 데이터를 가져와 페이지에 props로 전달할 수있다.
getStaticProps 함수는 next.js에 해당 페이지에 데이터 디펜던시가 있으니 빌드 타임 때 해당 페이지를 pre-render할 때 데이터 의존성을 먼저 해결하라고 말해준다.
getStaticProps 함수는 오직 page에서만 export 할 수 있다. 즉 pages 하위 파일에서만 사용 가능하다. 이는 리액트는 페이지가 리렌더 되기 전에 모든 필수적인 데이터를 갖고있어야 하기 때문이다.
개발모드에서 getStaticProps 함수는 요청마다 실행되며, production에서는 빌드 타임에서만 실행된다. 그러나 getStaticProps 함수가 fallback key를 반환하면 확장될 수 있다.

Fetching Data at Request Time

빌드 타임이 아니라 요청 시 데이터를 가져오고 싶을 때는 Server-side Rendering을 사용해야한다.
Server-side Rendering 방식에서 데이터를 가져올 때는 getStaticProps 대신 getServerSideProps를 사용해야한다.

예시

  export async function getServerSideProps(context) {
    return {
      props: {
        // props for your component
      },
    };
  }

getServerSideProps 은 getStaticProps 과 마찬가지로 브라우저가 아닌 서버에서 실행됩니다. 때문에 getServerSideProps 의 파라미터은 context는 request에 대한 정보를 포함합니다.
getServerSideProps 은 pre-render해야하는 페이지의 데이터가 요청 시 가져와야 하는 경우에만 사용해야합니다.
getServerSideProps 은 getStaticProps 보다 느리고 추가 설정을 하지 않는 한 CDN에 의해 캐시되지 않습니다.
데이터를 pre-render하고 싶지 않을 경우에는 CSR방식을 사용하는 것이 좋다.

Client-side Rendering

대쉬보드처럼 데이터를 pre-render 하고 싶지 않을 경우 사용하는 방식
next build 명령어 실행 → 앱이 배포로 빌드 됨 → 외부 데이터를 필요로 하지 않는 부분을 정적으로 생성함 → js가 로드 되면 data를 fetch → 불러온 데이터로 나머지 부분을 렌더링

Next.js - Assets, MetaData, CSS

Wed, 25 Oct 2023 05:44:25 GMT

Next.js에서 정적 파일 불러오기

next.js에서는 루트 폴더에 있는 public 폴더에 이미지 파일 같은 정적파일을 보관하고, / 로 시작하는 url로 파일에 접근 가능합니다. 예를들어 public 폴더 내에 sample.png 파일이 있다면 코드 내에서는 /sample.png로 접근 가능합니다.
next.js에서 정적 파일 사용 시 주의 할 점
1. 정적 파일이 저장된 폴더 이름은 반드시 public 이어야 한다.
  - public 폴더 이름은 변경되어서는 안되며 public 폴더만 유일한 정적파일 보관 폴더로 사용되어야 한다.
2. public 폴더에 저장된 파일의 이름과, pages 폴더에 저장된 파일의 이름이 같으면 안 된다.
  - next.js가 이를 구분 하지 못한다. 만약 파일 이름이 같을 경우 확장자라도 다른게 해야한다.
3. public 폴더 내의 모든 파일은 next.js에 의해 빌드 타임에 제공된다. 런타임에 추가된 파일은 사용할 수가 없다.
  - 만약 런타임에 추가한 파일을 사용하고 싶을 경우 AWS S3같이 서드파티 서비스를 사용해야한다.

이미지 파일 사용하기

일반적인 방식인 img 태그를 사용한 이미지 불러오면 아래 사항을 수동으로 처리해야 한다.
1. 다양한 화면 크기에서 이미지가 반응하는지 확인
2. 서드파티 제품이나 라이브러리로 이미지 최적화
3. 화면에 표시될때만 ( 뷰포트에 들어갈 때만 ) 이미지 로드
next/image 의 Image 컴포넌트는 위 작업을 자동으로 해줍니다. Image 컴포넌트는 이미지 리사이징, 이미지 최적화 그리고 브라우저가 지원한다면 WebP같은 최신 이미지 포맷도 사용할 수 있게 해줍니다.
또한 Next.js는 빌드 시 이미지를 최적화하는 대신, 사용자가 요청할 때 만 이미지를 최적화합니다. 정적 사이트와는 달리, 10개의 이미지를 전송하든 1천만 개의 이미지를 전송하든 빌드 시간이 증가하지 않습니다.
이미지는 기본적으로 lazy loading 됩니다.(화면에 표시될 이미지만 로드 ) 즉, 뷰포트 외부의 이미지에 대해서는 페이지 속도에 영향을 미치지 않습니다.
이미지는 레이아웃 오류를 방지하여 렌더링됩니다. 사용자 예상치 못하게, 레이아웃이 움직여 잘못된 행동을 하게 되는 것을 방지합니다.

사용법

  import Image from 'next/image';

  const YourComponent = () => (
    
  );

Image 컴포넌트 속성

src : 이미지 출처값으로, 프로젝트 디렉토리 내 정적경로 혹은 외부 도메인의 URL 스트링(config 설정 필요) 을 넘겨줘야 한다.
width, height : 이미지의 픽셀 너비 및 높이. 단위를 제외한 정수값을 전달해줘야 한다. (정적 이미지 혹은 layout="fii" 이 아닌 경우 요구된다.)
- Local Image는 자동으로 width, height를 계산해주지만(Cumulative Layout Shift 미발생), Remote Image는 Next.js가 빌드 시점에 파일에 접근할 수 없으므로 width, height props를 필수로 입력해줘야 한다.
기타 속성 자세히 보기

matadata 설정 하기

next/head 모듈에 있는 컴포넌트를 사용하면 페이지 별로 title 같은 메타 데이터를 다르게 설정할 수 있다.

예제

  // index.js
  
    Create Next App
    
  

  // first-post.js
  import Head from 'next/head';

  export default function FirstPost() {
    return (
      <>
        
          First Post
        
        First Post
        
          ← Back to home
        
      
    );
  }

Third-Party JavaScript

서드파티 js 라이브러리를 불러올 때 아래와 같이 head 태그 안에 불러 올 수 있다.

  
    First Post