I want to measure time that take server side rendering of the application.
renderToString is located in the next/server/render.js inside of the node_modules.
so it's unreachable
How I may actually measure app render time for ssr?
I try to override it as in the example https://github.com/zeit/next.js/tree/canary/examples/with-styled-components , but looks like it never was executed. Also I am not sire what inside renderPage and if time have strong correlation with renderToString timing.
_document.js
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => {
console.log('never shown');
originalRenderPage();
};
return { ...initialProps };
}
}
Also i may change in the server.js
server.get(pattern, (req, res) =>
app.render(req, res, `/${page}`, Object.assign({}, defaultParams, req.query, req.params))
)
to:
server.get(pattern, async (req, res) =>
//measure
const html = await app.render(req, res, `/${page}`, Object.assign({}, defaultParams, req.query, req.params))
// measure
res.end(html);
)
but would I ruin some behaviour this way?
And also it would include much more than just render time: it will include data fetching and many service next.js functions inside. Can it be avoided?
Would be nice if next.js could include (perhaps behind a flag) a Server-Timing header/trailer.
I would also find this really useful
Looks like the initial issue just has a mixed up order of things, it has to override ctx.renderPage before calling the parent getInitialProps. I've written down an example:
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage
ctx.renderPage = () => {
// before render
const result = originalRenderPage()
// after render
return result
}
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
}
Also opened a new issue to track adding Server-Timing support: #12382
Most helpful comment
Would be nice if
next.jscould include (perhaps behind a flag) a Server-Timing header/trailer.