CODEWITHSUNDEEP
javascriptreactjsnext.js
Yusuf
Yusuf

Reputation: 2388

Measuring performance of Next.js page with performance.now

I want to measure how long the page took for SSR. In next.js there is a way to measure the performance, using the function reportWebVitals But before to go with this approach, I would like to play with performance.now.

So, is it possible to measure render time with performance.now something like below snippet, will it be accurate?

const Page = () => {
  const t1 = performance.now();

  const pageBody = <h1>Hello world</h1>
  
  const t2 = performance.now();

  console.log(`Page took ${t2 - t1}ms`);

  return pageBody;
}

Note: Assume we're only doing SSR

Upvotes: 0

Views: 2078

Answers (1)

Josh Lin
Josh Lin

Reputation: 2437

here is my research result, page time doesnt relate with component render, as said in comments, render is the thing you need to measure

page: 0.112ms
component: 0.113ms
render 0 -------------: 10.383ms
page: 0.018ms
component: 0.054ms
render 1000 -------------: 1.284ms
page: 0.021ms
component: 3.903ms
render 1000000 -------------: 4.749ms
page: 0.019ms
component: 1.195s
render 1000000000 -------------: 1.201s
page: 0.011ms
// codes https://github.com/postor/measure-performance-of-react-ssr

so why this happen? because jsx are compiled like this

// before
const Page = ()=> <Comp /> 
// after
const Page = ()=>React.createElement(Comp)

so React.createElement does not render subcomponents directly, more like structures with subcomponents, as mentioned in comment, React is more a scheduler than a reactor, components are called when needed, so the timeline looks like this

call render
  found page
     call page and return structure
  found component
     call component and return structure
  render structure to html and return

Upvotes: 4

Related Questions