Next.js 정적 페이지에서 쿼리 매개변수 및 쿠키 사용

Next.js의 증분 정적 재생성은 환상적입니다. 배포할 때마다 전체 사이트를 다시 빌드하는 대신 미리 빌드된 정적 페이지를 대규모로 제공할 수 있습니다(기침, 기침, 개츠비!). SSG의 이점을 유지하면서 수백만 개의 정적 페이지로 확장할 수 있습니다.

정적 페이지는 비차단 방식으로 구축됩니다.

빌드 시간 동안

재검증 시 후크 호출

재확인 기간이 끝난 후 첫 번째 요청 시

이로 인해 개발자는 요청 컨텍스트에 의존하는 기본 빌드 페이지를 만들 수 없습니다. 예를 들어 로그인한 사용자, 재방문자, 지리적 위치 등에 대해 페이지 디자인이 다른 경우 클라이언트에서 해당 요소를 렌더링해야 하지만 해결책이 있습니다.

구조에 대한 Next.js Edge 미들웨어

Next.js에서 제공하는 미들웨어의 도움으로 사용자의 요청 시작과 완료 중간에 실행되는 함수를 작성할 수 있습니다. 이렇게 하면 사용자의 요청을 처리하고 필요한 경우 정적 페이지에 다시 작성할 수 있습니다.

따라서 우리의 경우에는 다음과 같이 다시 작성하고 싶습니다.

GET http://example.com/my-page

에게

GET http://example.com/my-page/{{path}}

여기서 path는 정적 페이지를 정확하게 렌더링하는 데 필요한 다양한 옵션의 결정적 문자열 표현입니다.

따라서 미들웨어를 사용하여 요청 컨텍스트에서 인코딩합니다. 지리적 위치, 재방문자 쿠키, 쿼리 매개변수 등이 있습니다. 그리고 다른 쪽 끝에서는 정적 경로 처리기가 그것을 디코딩하도록 할 것입니다.

예를 들어 사용자가 재방문자인지 여부, 국가를 가져오고 페이지를 가져오는 데 encodeOptions를 사용할 수 있습니다.

// middleware.js file
import { NextResponse } from 'next/server'
import { encodeOptions } from '../utils';

export default function middleware(request) {
  if (request.nextUrl.pathname === '/my-page') {
    const searchParams = request.nextUrl.searchParams
    const path = encodeOptions({
      returnVisitor: Boolean(request.cookies.get('visitor')),
      country: request.geo?.country,
      page: searchParams.get('page'),
    })

    return NextResponse.rewrite(new URL(`/my-page/${path}`, request.nextUrl))
  }
  return NextResponse.next()
}

그런 다음 정적 경로 처리기에서 다음 옵션을 디코딩할 수 있습니다.

// /pages/my-page/[path].jsx file
import { decodeOptions } from '../../utils'

export async function getStaticProps({
  params,
} {
  const options = decodeOptions(params.path)
  return {
    props: {
      options,
    }
  }
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: true
  }
}

export default function MyPath({ options }) {
  return <MyPage
    isReturnVisitor={options.returnVisitor}
    country={options.coutnry} />
}

이제 JSON.stringify 를 사용하는 것처럼 기본적인 인코딩/디코딩 기능을 구현할 수 있습니다. 그러나 우리는 그것보다 더 잘할 수 있습니다. 개체에서 결정적 문자열을 생성하는 라이브러리를 사용합시다.

npm install fast-json-stable-stringify

이 스니펫에서와 같이 사용하십시오.

// utils.js
// https://github.com/epoberezkin/fast-json-stable-stringify
import stringify from 'fast-json-stable-stringify'

export function encodeOptions(options) {
  const json = stringify(options)
  return encodeURI(json);
}

export function decodeOptions(path) {
  return JSON.parse(decodeURI(path));
}

결론

Next.js 미들웨어를 SSG/ISR 페이지와 결합하면 매우 강력하며 다음과 같은 다양한 사용 사례가 열립니다.

request.geo 또는 Accept-Language 헤더를 확인하여 지리적 위치를 기준으로 콘텐츠를 자동으로 현지화합니다.

request.headers.get('host')를 보고 호스팅 도메인을 기반으로 사이트의 테마를 변경합니다.

동일한 페이지의 A/B 테스트 변형.

사용자 유형에 따라 경험을 개인화합니다.

동일한 기술을 사용하여 Builder.io에서 고성능 A/B 테스트 및 콘텐츠 개인화를 제공하는 방법에 대한 자세한 내용은 A/B Testing and Personalization with Next.js Edge Middleware을 확인하십시오.