To support SSR, we'll need to import from
@aesthetic/react/server and instantiate a server-based
style engine with
createServerEngine() to extract critical CSS with
extractStyles(). From there,
we can utilize the ReactDOM server, and the following functions to render styles.
renderToStyleMarkup- Converts extracted styles to a static HTML string that contains
renderToStyleElements- Converts extracted styles to a list of React
In the example below, we'll use Express as our server.
Since our CSS extraction results in multiple
<style /> tags, they'll need to be injected into a
layout HTML file without being escaped. Something like the following.
Because of this architecture, the React application cannot include and render the full HTML
document. To work around this, a double render will need to be executed, where the application is
rendered 1st with
renderToString(), and the document that includes the content and styles is
rendered 2nd with
Support Aesthetic in Next.js requires using a
custom document. Begin by creating a
pages/_document.ts with the following contents.