Which Next.js Page Rendering Metric to Profile First?

Goal: Identify the primary bottleneck in Next.js page rendering before applying optimizations.

Next.js provides a built‑in profiling mode (next build --profile / next dev --profile) that emits a .profile file consumable by the React 18 Profiler. This captures server‑side rendering time, but it does not include client‑side hydration or bundle size metrics. Developers often supplement the built‑in profiler with browser DevTools or webpack‑bundle‑analyzer to get a fuller picture. Additionally, the Edge Runtime for API routes is still in preview; its profiling support and environment variable handling differ from the Node.js Runtime, which can produce inconsistent results.

Given these constraints, which Next.js page rendering metric should be measured first to most effectively target performance improvements? How can we reliably capture client‑side hydration time in a way that integrates with the built‑in profiler? Does the Edge Runtime currently support profiling, and if so, how does its behavior differ from the Node.js Runtime?