Server Rendering

As already mentioned, Fela supports server-side rendering out of the box. All you need to do is call 

renderToMarkup
or, depending on your scenario, 
renderToSheetList
 once you are finished rendering styles and you will get the final HTML markup for the 
<style>
elements. That's it. No magic. No extra configuration.

Usually you will render all styles on the server and inject the rendered CSS markup into the HTML markup which gets sent to the client.

Example

The following code shows a simple server example using express(new tab) and React(new tab).

server.js

import express from 'express'
import React from 'react'
import { createRenderer } from 'fela'
import { renderToMarkup } from 'fela-dom'
import { RendererProvider, useFela } from 'react-fela'


// simplified demo app
const App = () => {
  const { css } = useFela()


  return (
    <div className={css({ color: 'blue', fontSize: '15px' })}>Hello World</div>
  )
}


// Our initial html template
const appHTML = `
<!DOCTYPE html>
<html>
<head>
  <title>Fela - Server Rendering</title>
  {{style}}
</head>
<body>
  <div id="app">
    {{app}}
  </div>
</body>
</html>
`


const server = express()


server.get('/', (req, res) => {
  const renderer = createRenderer()


  renderer.renderStatic(
    {
      margin: 0,
      padding: 0,
    },
    'html, body'
  )


  const htmlMarkup = renderToString(
    <RendererProvider renderer={renderer}>
      <App />
    </RendererProvider>
  )


  const styleMarkup = renderToMarkup(renderer)
  // inject the rendered html and css markup into the basic app html
  res.write(
    appHTML.replace('{{app}}', htmlMarkup).replace('{{style}}', styleMarkup)
  )
  res.end()
})
// provide the content via localhost:8080
server.listen(8080, 'localhost')

Rendered Markup

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Fela - Server Rendering</title>
    <style type="text/css" data-fela-type="STATIC">
      html,
      body {
        margin: 0;
        padding: 0;
      }
    </style>
    <style type="text/css" data-fela-type="RULE">
      .a {
        color: blue;
      }
      .b {
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="a b">Hello World</div>
    </div>
  </body>
</html>

Advanced Usage

The above example highlights the basic mechanics, but we do not recommend writing your own SSR logic.
There are tools such as Next(new tab) and Gatsby(new tab) which can do that for you in a way more clever way.

Check out all existing Integrations.