Files
AFFiNE-Mirror/packages/app/src/pages/_document.tsx
2022-10-21 15:19:39 +08:00

54 lines
1.2 KiB
TypeScript

import createEmotionServer from '@emotion/server/create-instance';
import { cache } from '@emotion/css';
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from 'next/document';
import * as React from 'react';
export const renderStatic = async (html: string) => {
if (html === undefined) {
throw new Error('did you forget to return html from renderToString?');
}
const { extractCritical } = createEmotionServer(cache);
const { ids, css } = extractCritical(html);
return { html, ids, css };
};
export default class AppDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const page = await ctx.renderPage();
const { css, ids } = await renderStatic(page.html);
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<React.Fragment>
{initialProps.styles}
<style
data-emotion={`css ${ids.join(' ')}`}
dangerouslySetInnerHTML={{ __html: css }}
/>
</React.Fragment>
),
};
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}