# PPRとは
PPR（Partial Pre Rendering）とは、静的コンポーネントと動的コンポーネントを同一のルート内で組み合わせることを可能にする機能です。従来のレンダリングモデルのメリットを組み合わせており、既存のモデルを簡素化しつつも高いパフォーマンスを実現します。
簡単に言うと、画面の一部分だけ動的にして、それ以外の箇所は静的にすることができる機能になります。

https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering

# これまでのレンダリングモデルについて
Next.jsには、レンダリングモデルとして、SSR、SSG、ISRがありました。
それぞれ、動的にレンダリングするか、静的にレンダリングするかを設定することができますが、ページ単位(page.tsx, layout.tsxなど)でしか、設定することができませんでした。
例えば、画面の大半が静的化できるようなページでも、一部動的にデータを取得する必要がある要素があることによって、画面全体を動的化しなければいけませんでした。

しかし、PPRが出てきたことによって、この問題が解決さ、デフォルトではStatic Renderingとし、<Suspense>境界内をDynamic Renderingとすることを可能としました。これにより、必ずしもレンダリングをRoute単位で考える必要はなくなり、1つのページ・1つのHTTPレスポンスにStaticとDynamicを混在させることができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/572b273a-1e2d-3679-5b0a-aebbceecd493.png)

# PPRを使うメリット
PPRには、次のようなメリットがあります。
- ページの一部を静的にレンダリングすることで、初回ロード時間を短縮できる﻿
- ユーザーエクスペリエンスが向上する﻿
- 既存のレンダリングモデルのメリットを組み合わせて、シンプルに整理した新しいアプローチである﻿
- 既存のモデルを簡素化しつつも高いパフォーマンスを実現する﻿

例えば、ヘッダーやサイドバーなどの更新がほとんどされることのない要素については、静的にレンダリングし、データを取得して、表示している箇所については、動的にレンダリングすることで、画面速度の向上などのパフォーマンス改善が期待できます。

# 機能内容、使い方
PPRを有効にするには、以下のように、next.config.jsのppr オプションをincremental に設定し、ファイルの先頭で experimental_pprルート設定オプションをエクスポートします。

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

# まとめ
PPRを用いることで、<Suspense>と言う境界を用いて、素直な構成でパフォーマンスをアップさせることができるようになります。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# PPRとは
PPR（Partial Pre Rendering）とは、静的コンポーネントと動的コンポーネントを同一のルート内で組み合わせることを可能にする機能です。従来のレンダリングモデルのメリットを組み合わせており、既存のモデルを簡素化しつつも高いパフォーマンスを実現します。
簡単に言うと、画面の一部分だけ動的にして、それ以外の箇所は静的にすることができる機能になります。

https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering

# これまでのレンダリングモデルについて
Next.jsには、レンダリングモデルとして、SSR、SSG、ISRがありました。
それぞれ、動的にレンダリングするか、静的にレンダリングするかを設定することができますが、ページ単位(page.tsx, layout.tsxなど)でしか、設定することができませんでした。
例えば、画面の大半が静的化できるようなページでも、一部動的にデータを取得する必要がある要素があることによって、画面全体を動的化しなければいけませんでした。

しかし、PPRが出てきたことによって、この問題が解決さ、デフォルトではStatic Renderingとし、<Suspense>境界内をDynamic Renderingとすることを可能としました。これにより、必ずしもレンダリングをRoute単位で考える必要はなくなり、1つのページ・1つのHTTPレスポンスにStaticとDynamicを混在させることができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/572b273a-1e2d-3679-5b0a-aebbceecd493.png)

# PPRを使うメリット
PPRには、次のようなメリットがあります。
- ページの一部を静的にレンダリングすることで、初回ロード時間を短縮できる﻿
- ユーザーエクスペリエンスが向上する﻿
- 既存のレンダリングモデルのメリットを組み合わせて、シンプルに整理した新しいアプローチである﻿
- 既存のモデルを簡素化しつつも高いパフォーマンスを実現する﻿

例えば、ヘッダーやサイドバーなどの更新がほとんどされることのない要素については、静的にレンダリングし、データを取得して、表示している箇所については、動的にレンダリングすることで、画面速度の向上などのパフォーマンス改善が期待できます。

# 機能内容、使い方
PPRを有効にするには、以下のように、next.config.jsのppr オプションをincremental に設定し、ファイルの先頭で experimental_pprルート設定オプションをエクスポートします。

``` next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
export default nextConfig
```

``` app/page.tsx
import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

// experimental_pprをエクスポート
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}
```

# まとめ
PPRを用いることで、<Suspense>と言う境界を用いて、素直な構成でパフォーマンスをアップさせることができるようになります。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

PPRとは

続きを読むには単価診断を受けてください（30秒）