<Document>

The

Document component in app/pages/_document.tsx can be used to augment your application’s <html> and <body> tags. This is necessary because Blitz pages skip the definition of the surrounding document’s markup.

The default

_document.tsx file looks like this:

  1. import {Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/} from "blitz"class MyDocument extends Document {  // Only uncomment if you need to customize this behaviour  // static async getInitialProps(ctx: DocumentContext) {  //   const initialProps = await Document.getInitialProps(ctx)  //   return {...initialProps}  // }  render() {    return (      <Html lang="en">        <DocumentHead />        <body>          <Main />          <BlitzScript />        </body>      </Html>    )  }}export default MyDocument

<Html>, <DocumentHead />, <Main /> and <BlitzScript /> are required for the page to be properly rendered.

Custom attributes are allowed as props, like

lang:

  1. <Html lang="en">

The

ctx parameter is an object containing the following keys:

  • pathname - Current route. That is the path of the page in /pages
  • req: The HTTP IncomingMessage object.
  • res: The HTTP response object.
  • err - Error object if any error is encountered during the rendering
  • renderPage: Function - a callback that runs the actual React rendering logic (synchronously). It’s useful to decorate this function in order to support server-rendering wrappers for things like styled-components

Caveats

  • Document is only rendered in the server, event handlers like onClick won’t work
  • React components outside of <Main /> will not be initialized by the browser. Do not add application logic here. If you need shared components in all your pages (like a menu or a toolbar), take a look at the App component instead
  • Document‘s getInitialProps function is not called during client-side transitions, nor when a page is statically optimized
  • Make sure to check if ctx.req / ctx.res are defined in getInitialProps. Those variables will be undefined when a page is being statically exported by Automatic Static Optimization
  • Common errors include adding a <title> in the <Head /> tag . These should be avoided in app/pages/_document.js as they lead to unexpected behavior

Customizing renderPage

It should be noted that the only reason you should be customizing

renderPage is for usage with css-in-js libraries that need to wrap the application to properly work with server-side rendering.

It takes as argument an options object for further customization:

  1. import {Document} from "blitz"class MyDocument extends Document {  static async getInitialProps(ctx) {    const originalRenderPage = ctx.renderPage    ctx.renderPage = () =>      originalRenderPage({        // useful for wrapping the whole react tree        enhanceApp: (App) => App,        // useful for wrapping in a per-page basis        enhanceComponent: (Component) => Component,      })    // Run the parent `getInitialProps`, it now includes the custom `renderPage`    const initialProps = await Document.getInitialProps(ctx)    return initialProps  }}export default MyDocument