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
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