Next.js 15：释放 PPR 的潜力⚡️

# Web 开发 # 编程 # 前端开发 # nextjs

部分预渲染 (PPR) 是 Next.js 15 中引入的突出功能之一。此更新对页面**预渲染**的方式进行了重大改进，使开发人员能够更好地控制性能和用户体验。

什么是部分预渲染 (PPR)？

PPR 允许开发人员选择性地仅预渲染页面的某些部分，而让其他部分在运行时动态渲染。这种混合方法对于内容或用户特定数据频繁更改的应用程序特别有用。

PPR 无需预渲染整个页面，而是让您决定预渲染页面的哪些部分以及按需获取哪些部分。这可以优化构建时间，并通过更快地提供关键内容来改善用户体验。

为什么 PPR 很重要？

假设您正在构建一个旅行计划应用程序。每个用户的仪表板显示：

个性化旅游推荐清单（动态）。

包含旅行提示和新闻的静态部分。

突出显示热门目的地的地图（动态但已缓存）。

在 PPR 出现之前，预渲染动态内容需要复杂的解决方法，或者开发人员必须依赖客户端渲染，这可能会损害 SEO 和性能。使用 PPR，您可以无缝结合静态和动态内容。

工作流

Next.js 15 中的部分预渲染如何工作？

让我们以我们的旅行计划应用程序为例，逐步了解 PPR 的工作原理。

步骤 1：预渲染静态内容

旅行提示和新闻等静态内容可以在构建过程中预渲染。这些部分不会频繁更改，可以快速提供给用户。

export async function getStaticProps() {
  const travelTips = await fetchTravelTips();
  return {
    props: {
      travelTips,
    },
  };
}

export default function TravelTips({ travelTips }) {
  return (
    
      Travel Tips
      
        {travelTips.map((tip) => (
          {tip.text}
        ))}
      
    
  );
}

第 2 步：使用 PPR 进行动态内容

动态内容（例如个性化旅行推荐）是在运行时获取的，但仍可从缓存中获益。借助 PPR，您可以定义这些部分以进行动态渲染。

export async function getServerSideProps(context) {
  const userId = context.params.userId;
  const recommendations = await fetchRecommendations(userId);

  return {
    props: {
      recommendations,
    },
  };
}

export default function Recommendations({ recommendations }) {
  return (
    
      Your Travel Recommendations
      
        {recommendations.map((rec) => (
          {rec.destination}
        ))}
      
    
  );
}

步骤 3：结合静态和动态内容

现在，我们将静态和动态部分合并为一个统一的页面。静态旅行提示部分是预渲染的，而推荐部分则是按需获取的。

export default function Dashboard({ travelTips, recommendations }) {
  return (
    
      
      
    
  );
}

步骤 4：使用 ISR 进行缓存

为了进一步优化动态部分，我们可以对热门目的地地图等部分使用增量静态再生 (ISR)。这可确保地图定期更新，而无需重建整个应用程序。

export async function getStaticProps() {
  const popularDestinations = await fetchPopularDestinations();
  return {
    props: {
      popularDestinations,
    },
    revalidate: 3600, // Revalidate every hour
  };
}

export default function PopularDestinations({ popularDestinations }) {
  return (
    
      Popular Destinations
      
        {popularDestinations.map((dest) => (
          {dest.name}
        ))}
      
    
  );
}

Next.js 15 中 PPR 对开发人员的影响

**构建速度更快：**通过仅预渲染必要的静态内容，构建时间显著缩短。动态内容会根据需要获取，从而使流程更加高效。

**改善用户体验：**关键内容即时交付，动态部分在后台无缝加载。这种混合方法平衡了性能和交互性。

**SEO 优势：** 静态部分可被搜索引擎抓取，从而提高应用的可发现性。动态内容不会影响您的 SEO 工作。

结论

Next.js 15 中的部分预渲染提供了一种灵活而高效的方式来构建现代应用程序。通过结合静态和动态渲染，PPR 可以增强性能、用户体验和 SEO。我们的旅行计划应用程序只是 PPR 如何改变您的开发过程的一个示例。

在探索此功能时，请考虑应用程序的静态和动态需求。借助 PPR，Next.js 15 可让您实现两全其美！

CLIS.CC