Load data in `_document.ts` via API request #39681

jhancock532 · 2022-08-17T10:16:03Z

jhancock532
Aug 17, 2022

I've made a code snippet for if you have to use an API request to set a html lang attribute or similar.

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';

type DocumentPropTypes = {
    languageCode?: string;
};

export default class MyDocument extends Document<DocumentPropTypes> {
    static async getInitialProps(ctx: DocumentContext) {
        const apiResponse = await fetch('your-api-request-url-here').then(response => response.json());

        const initialProps = await Document.getInitialProps(ctx);

        return { ...initialProps, languageCode: apiResponse.languageCode };
    }

    render() {
        const { languageCode } = this.props;
        return (
            <Html lang={languageCode}>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

This isn't a great idea if you're running a server side rendered app I think, as now you've got an API call pausing your page load before all your other API calls are sent (this is just an observation from using next dev). Would the above code be suitable for static sites with ISR?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Load data in `_document.ts` via API request #39681

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Load data in _document.ts via API request #39681

Uh oh!

Uh oh!

jhancock532 Aug 17, 2022

Replies: 0 comments

Load data in `_document.ts` via API request #39681

jhancock532
Aug 17, 2022