ETC.

after

응답 및 사전 렌더링이 완료된 이후에 호출될 작업을 예약하는 후처리 메서드

import { after } from 'next/server'

export default function Layout() {
  after(() => { // 실행될 콜백을 인자로 받음
    log();
  })
} 

• 서버 컴포넌트, 서버 액션, 라우트 핸들러, 미들웨어에서 사용 가능

  • 응답 및 사전 렌더링이 완료된 이후에 호출될 작업(콜백)을 예약하는 후처리 메서드

  • 사전 렌더링 (서버 컴포넌트)

  • 응답 (서버 액션, 라우트 핸들러, 미들웨어)

• 로깅이나 분석 같이 작업이 블락되지 않아야할 작업들에 유용

• 동적 API가 아니므로 after api를 사용한다하더라도 정적 페이지가 동적 페이지로 변경되지 않음

  • 정적 페이지의 경우 빌드시, 페이지 재검증 마다 실행됨

• 응답이 성공적으로 완료되지 않은 경우(리디렉션, 낫파운드)에도 실행함

• 서버 액션이나, 라우트 핸들러에서 request API (헤더, 쿠키)를 after 내부에서 사용 가능

  • 서버 컴포넌트에서는 사용 불가

    • Next.js는 PPR을 위해 빌드 타임 또는 요청 처리 초기에 request API 사용 여부를 파악해야 함.

    • 서버 컴포넌트의 after()는 React 사전 렌더링이 끝난 후 (즉, 클라이언트로 스트리밍하기 직전에) 실행되므로,

    • 이 시점에 request API를 사용하면 Next.js는 이 컴포넌트가 동적이라는 걸 사전에 알 수 없음 → PPR 최적화 실패

    • after(async () => {  
        const userAgent = (await headers().get('user-agent')) || 'unknown'
        const sessionCookie =
          (await cookies().get('session-id'))?.value || 'anonymous'
       
          logUserAction({ sessionCookie, userAgent })
      })

PPR (Partial PreRendering)

• 페이지 전체를 사전 렌더링하지 않고, 특정 영역(데이터 패칭이 필요한 경우, 즉 정적으로 생성된 케이스가 아닌 경우)을 스트리밍하여 점진적으로 렌더링 하는 기술

instrumentation.js

코드를 사용해 센트리같은 모니터링, 로깅 도구를 앱에 통합하는 프로세스

• 서버에서 발생한 모든 오류에 대한 컨텍스트 캡처

  • 페이지 라우터, 앱 라우터 사용 가능

  • 서버 컴포넌트, 서버 액션, 라우트 핸들러, 미들웨어 사용 가능

// src/instrumentation.js
export async function onRequestError(error, request, context) {
  await fetch('https://....' {
    method: 'POST',
    body: JSON.stringify({ message: error.message, request, context }),
    headers: { 'Content-Type': 'application/json' }
  })
}

// next 서버 인스턴스가 시작될 때 한번 호출됨
export async function register() {
  //init sentry SDK
}

• 프로젝트 루트에 instrumentation.js[ts] 생성

Form Component

<form /> 요소를 확장한 'next/form' 컴포넌트

폼 제출을 통해 네비게이션 및 쿼리 업데이트하는 보일러 플레이트 코드들을 줄일 수 있음 👍

import Form from 'next/form';

export default function Page() {
  return (
   {/* action에 전달한 경로로 페이지 전환(client) */}
    <Form action='/search'>
      {/*  name='query' 인풋의 벨류가 URL 쿼리로 붙게된다.*/}
      <input name='query' /> 
      <button type='submit'>Submit</button>
    </Form>
  )
}

• Prefetching: 화면에 해당 컴포넌트가 표시되면, 폼 제출후 전환될 페이지의 Layout과 Loading UI가 프리패칭되어 탐색속도가 빨라짐

• Client-Side Navigation: 폼 제출시 공유된 레이아웃과, 클라이언트 상태가 보존됨

• Progressive Enhancement: JS가 로드되기 전에도 작동함 -> <form /> 제출 기능은 원래 html 기능이기 때문

Optimizing bundling of extenral packages

• 외부 패키지를 번들링하면 앱의 콜드 스타트(캐시가 안 된 상태에서의 첫 로드) 성능이 향상됨

• App Routing 에선 기본적으로 외부 패키지를 번들링

  • serverExternalPackages 옵션을 이용해서 특정 패키지를 옵트아웃 가능

  • 반대로 Pages Routing은 기본적으로 외부 패키지를 번들링하지 않고 transpilePackages 옵션을 사용해서 번들링할 패키지를 정의함