Next.js: How you may access renderToString function?

Created on 15 Apr 2019  路  3Comments  路  Source: vercel/next.js

How you may access renderToString function?

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?

feature request

Most helpful comment

Would be nice if next.js could include (perhaps behind a flag) a Server-Timing header/trailer.

All 3 comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

renatorib picture renatorib  路  3Comments

olifante picture olifante  路  3Comments

ghost picture ghost  路  3Comments

pie6k picture pie6k  路  3Comments

sospedra picture sospedra  路  3Comments