Feature: `breakpoint server` as middleware with user-agent detection and option to ISR to have an improved visual speed to our enduser

[maapteh]

I created an example with using middleware to detect the best educated guess for a breakpoint utilizing the User-Agent. And then passing this initial breakpoint to the application. Which then takes it from there and sees for the real breakpoint and updates the UI accordingly.

Because of middleware it became possible to have a better strategy to be right in the first render-cycle to our clients. So the best UX with minimal reflows!

It also shows how it can build the types of pages we defined, and serve these from the SSG.

Page                                       Size     First Load JS
┌   /_app                                  0 B            76.2 kB
├ ƒ /_middleware                           40.8 kB         117 kB
├ ● /[breakpoint] (ISR: 60 Seconds)        510 B          76.7 kB
├   ├ /sm
├   ├ /md
├   └ /lg
└ ○ /404                                   194 B          76.4 kB
+ First Load JS shared by all              76.2 kB
  ├ chunks/framework-91d7f78b5b4003c8.js   42 kB
  ├ chunks/main-a89779f987984dde.js        27.8 kB
  ├ chunks/pages/_app-fb44cafc2a8f476d.js  5.58 kB
  ├ chunks/webpack-592b97d0377c68ad.js     812 B
  └ css/b996d6184d403e5d.css               3.35 kB

More background information can be found at https://mpth.medium.com/render-server-side-for-specific-viewports-with-option-to-cache-1196fbf936c3 and i thought an example explains way more then some loose file references.

[vercel[bot]]

@maapteh is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

edge-functions-feature-flag-posthog – ./edge-functions/feature-flag-posthog

🔍 Inspect: https://vercel.com/vercel/edge-functions-feature-flag-posthog/9aQ13aK8uq9WeYt4BuxnTAx5KTj7
✅ Preview: Canceled

[Deployment for f1d50db canceled]

edge-functions-news – ./edge-functions/next-news

🔍 Inspect: https://vercel.com/vercel/edge-functions-news/EziyNcNccrkvp81nbMCpNMYHqDTc
✅ Preview: Canceled

[Deployment in progress for f1d50db]

examples – ./solutions/image-offset

🔍 Inspect: https://vercel.com/vercel/examples/8PDtyT1w3FDFG4TwUU5SasMjUqLN
✅ Preview: Canceled

[Deployment for f1d50db canceled]

example-reduce-image-bandwidth-usage – ./solutions/reduce-image-bandwidth-usage

🔍 Inspect: https://vercel.com/vercel/example-reduce-image-bandwidth-usage/9wdTE8zCDz3bQ3yefRngPtewx6Ac
✅ Preview: Canceled

[Deployment for f1d50db canceled]

edge-functions-cookies – ./edge-functions/cookies

🔍 Inspect: https://vercel.com/vercel/edge-functions-cookies/93srbnjws3ZPa9HZjyWiv6ucDzSQ
✅ Preview: Canceled

[Deployment for f1d50db canceled]

solutions-combining-data-fetching-strategies – ./solutions/combining-data-fetching-strategies

🔍 Inspect: https://vercel.com/vercel/solutions-combining-data-fetching-strategies/BJe4CKbbswCg3NnBWbzSFuQdKVod
✅ Preview: In Progress

[Deployment for f1d50db canceled]

solutions-script-component-strategies – ./solutions/script-component-strategies

🔍 Inspect: https://vercel.com/vercel/solutions-script-component-strategies/9fnppycNyrnJ2MDo3kicPjWqMBvt
✅ Preview: In Progress

[Deployment in progress for f1d50db]

example-auth-with-ory – ./solutions/auth-with-ory

🔍 Inspect: https://vercel.com/vercel-solutions-vtest314/example-auth-with-ory/GeSwnhyZeG6NsW2jC4KwDadrazpN
✅ Preview: https://example-auth-with-ory-git-fork-91cc86-vercel-solutions-vtest314.vercel.app

solutions-reuse-responses – ./solutions/reuse-responses

🔍 Inspect: https://vercel.com/vercel/solutions-reuse-responses/B6NDFnzhri4f5K5o5zWwiixrwVYD
✅ Preview: Failed

[Deployment for f1d50db failed]

[vercel[bot]]

Deployment failed with the following error:

Resource is limited - try again after in 8 minutes (more than 150, code: "api-deployments-paid-per-hour").

[maapteh]

@leerob how to get this reviewed? Or what rules to follow :)

[maapteh]

Hi @maapteh 👋 thank you for the PR!

I added a small comment, and I'm blocking changes because after it's resolved I'll update versions to match the other examples that were recently updated.

@lfades what is the status ?