인프런 커뮤니티 질문&답변

다연님, 안녕하세요. 메일 보내주셔서 답변 드릴 수 있게 됐어요! 감사합니다.

next.config.js 파일을 수정해주셔야 할 것 같아요. 다음과 같이 수정해보시면 PartialPrerendering이 정상 동작하는 것을 확인하실 수 있어요.

const createMDX = require("@next/mdx");

// module.default = {
//   experimental: {
//     ppr: true,
//   },
// };

const withMDX = createMDX({
  extension: /\.mdx?$/,
});

module.exports = withMDX({
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
  experimental: { // 여기로 설정을 옮겼어요!
    ppr: true,
  },
});

아마도 MDX 설정을 추가하시는 과정에서 파일이 변경되면서 설정 충돌이 난 것 같아요. 적용 해보시고도 문제가 있으면 다시 질문 남겨주세요!

메일 보내주셔서 감사합니다. 궁금한 점이 있다면 언제든 또 질문 주세요!

Dayeon님! 답변이 늦어서 정말 죄송해요.

남겨주신 상황을 보니 저도 왜 그런지 알기 어렵네요! 캡쳐해주신 부분은 모두 잘해주신 것으로 보여요. 혹시 가능하다면 작업 중이신 코드 저장소 링크를 공유해주실 수 있을까요? 여기에 링크 올리시기 어렵다면 제 계정(imjoeunha@gmail.com, https://github.com/hajoeun)에 공유해주시면 될 거 같아요.

공유해주시면 저도 테스트 해보고 바로 답변 드릴게요!
질문 남겨주셔서 정말 감사해요!

안녕하세요, 인프런 AI 인턴입니다. dayeon Kim님 질문 주셔서 감사합니다.

PPR(Partial Prerendering)을 적용하고자 하였지만, Vercel의 빌드 로그에서 SSG(Static Site Generation)로 표시되는 것은 어느 부분에서 설정이 다르게 되어있는지 체크해야 할 필요가 있을 것 같습니다.

PPR 적용 확인 체크리스트

1. Next.js 버전 문제: next 패키지가 14.1.1-canary.46로 설정되어 있는데, PPR은 해당 버전에서 Preview 기능으로, Canary 버전에서만 사용 가능할 수도 있습니다. 공식 문서를 참고하여 해당 Canary 버전에서 PPR이 제대로 지원되는지, 그리고 그 버전을 사용 중인지 확인해보세요.

2. next.config.js 설정: next.config.js 파일에서 experimental: { ppr: true }로 설정되어 있는지 확인하셨겠지만, 혹시 놓친 부분이 없는지 확인이 필요합니다.

3. 정확한 PPR 사용 방법: PPR 적용 시 렌더링되는 페이지의 코드가 제대로 설정되어 있는지, 특히 Suspense와 함께 사용될 때 올바르게 비동기 데이터를 가져오고 있는지 확인해보세요. Suspense가 제대로 동작한다고 하여도, PPR은 다른 설정을 필요로 할 수 있습니다.

4. Vercel 로그 확인: Vercel의 Build Logs를 다시 한번 확인해서 PPR을 제대로 인식하지 못하는 부분이 있는지 세부적으로 살펴보는 것이 중요합니다. 특별한 경고나 오류 메시지가 없는지도 확인해주세요.

참고 링크 및 문서

• PPR 기능에 대한 자세한 내용은 Next.js 공식 문서에서 최신 정보를 확인하실 수 있습니다.
  
• Vercel의 예제 프로젝트 혹은 문서를 통해서 동일한 기능이 어떻게 적용되는지를 비교해보시면 문제를 해결하는 데 도움이 될 것입니다.
  

현재 상황은 설정이나 사용 방법에서의 미세한 차이로 나타난 결과일 수 있어, 실수할 수 있는 부분을 다시 한번 점검하시면 해결의 실마리를 찾으실 수 있을 거라 생각합니다.

저는 질문자님의 이해를 돕고자 기존 지식공유와 답변 링크를 참고하여 설명드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.