Avoid page double render with emotion vanilla (vercel#30541)

> Based on https://github.com/vercel/next.js/blob/v12.0.1/packages/next/server/render.tsx#L522-L532, this avoids the need for double page render. After investigation, the potential unneeded render has been introduced in the official [example](https://github.com/vercel/next.js/pull/20228/files#diff-3976da223aaf15067ecdd0734ca277ebf4629c46d62f89d732ab392752d3572dR6) but does not exist in the earlier proposed [solution](https://gist.github.com/colinhacks/c40519a6a050a99091862319151377ec). There might a reason (layered override?) for it but I am unable to find relevant explanation.

Original discussion in mantinedev/mantine#348.

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

Author: zifeo

examples/with-emotion-vanilla/pages/_document.js

@@ -3,9 +3,8 @@ import * as React from 'react'
 import { renderStatic } from '../shared/renderer'
 export default class AppDocument extends Document {
   static async getInitialProps(ctx) {
-    const page = await ctx.renderPage()
-    const { css, ids } = await renderStatic(page.html)
     const initialProps = await Document.getInitialProps(ctx)
+    const { css, ids } = await renderStatic(initialProps.html)
     return {
       ...initialProps,
       styles: (