Skip to content

Latest commit

 

History

History
 
 

server

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
async-sheet.test.ts
async-sheet.test.ts
 
 
index.ts
index.ts
 
 

README.md

This module provides asynchronous Node.JS only Static Extraction a.k.a. Server Side Rendering (SSR). In most cases the {@link twind/sheets | synchronous SSR} should be preferred. Please refer to the {@page Extract Styles aka SSR | SSR guide} for more details.

❗ This is an experimental feature and only supported for Node.JS >=12. Use with care and please report any issue you find. Consider using the synchronous API when ever possible due to the relatively expensive nature of the promise introspection API provided by V8. Async server side rendering is implemented using async_hooks. Callback-based APIs and event emitters may not work or need special handling.

import { setup } from 'twind'
import { asyncVirtualSheet, getStyleTag } from 'twind/server'

const sheet = asyncVirtualSheet()

setup({ ...sharedOptions, sheet })

async function ssr() {
  // 1. Reset the sheet for a new rendering
  sheet.reset()

  // 2. Render the app
  const body = await renderTheApp()

  // 3. Create the style tag with all generated CSS rules
  const styleTag = getStyleTag(sheet)

  // 4. Generate the response html
  return `<!DOCTYPE html>
    <html lang="en">
      <head>${styleTag}</head>
      <body>${body}</body>
    </html>
  `
}