Fluentui: Fabric SSR integration with Next.js

Created on 6 Sep 2017  路  8Comments  路  Source: microsoft/fluentui

Hi All,

I need some guidance for the integration with Next.js.

I checked the Fabric README.md file, and I can make it partially work. However, the result is not very good:

ezgif-2-6b6ffd395f

As you can see, if I refresh the page, it takes sometime before the Fabric UI layout getting added. So I feel like there are some issues with my configuration.

My custom express.js looks like:

import express from 'express';
import next from 'next';
import { configureLoadStyles } from '@microsoft/load-themed-styles';

// Store registered styles in a variable used later for injection.
let _allStyles = '';

// Push styles into variables for injecting later.
configureLoadStyles((styles) => {
  _allStyles += styles;
});

const port = 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev })
const handle = app.getRequestHandler();

app.prepare()
  .then(() => {
    const server = express();

    server.get('*', (req, res) => handle(req, res));

    server.listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  });

And the index.js file looks like:

import { configureLoadStyles } from '@microsoft/load-themed-styles';

// Store registered styles in a variable used later for injection.
let _allStyles = '';

// Push styles into variables for injecting later.
configureLoadStyles((styles: string) => {
  _allStyles += styles;
  console.log(_allStyles);
});

import React from 'react';
import Head from 'next/head';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Button } from 'office-ui-fabric-react/lib/Button';

export default () => {
  console.log(_allStyles);
  return (
    <div>
      <Head>
        <style>${_allStyles}</style>
      </Head>
      <Fabric>
        <Button
          onClick={() => console.log('DDD')}
        >
          ghi
        </Button>
      </Fabric>
    </div>
  );
}

Should I create a middleware for the configureLoadStyles function?

Thanks!

picture JunyuanZheng

Most helpful comment

I had this issue as well. But solved it by creating pages/_document.js and use fabrics configureLoadStyles + renderStatic from glamor/server (since Fabric is using glamor.

This is my _document.js file:

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';
import { configureLoadStyles } from '@microsoft/load-themed-styles';
import { renderStatic } from 'glamor/server';

import "babel-polyfill";

let _allStyles = '';
configureLoadStyles(styles => {
    _allStyles += styles;
});

export default class PSKDocument extends Document {
    static getInitialProps({ renderPage }) {
        const page = renderPage();
        const styles = flush();
        const gStyles = renderStatic(() => page.html)

        return { ...page, styles, ...gStyles };
    }

    render() {
        return (
            <html>
                <Head>
                    <style id="glamor-styles" dangerouslySetInnerHTML={{ __html: this.props.css }} />
                    <style id="fabric-styles" dangerouslySetInnerHTML={{__html: _allStyles}} />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}
picture philipodev on 22 Sep 2017
👍4

All 8 comments

I had this issue as well. But solved it by creating pages/_document.js and use fabrics configureLoadStyles + renderStatic from glamor/server (since Fabric is using glamor.

This is my _document.js file:

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';
import { configureLoadStyles } from '@microsoft/load-themed-styles';
import { renderStatic } from 'glamor/server';

import "babel-polyfill";

let _allStyles = '';
configureLoadStyles(styles => {
    _allStyles += styles;
});

export default class PSKDocument extends Document {
    static getInitialProps({ renderPage }) {
        const page = renderPage();
        const styles = flush();
        const gStyles = renderStatic(() => page.html)

        return { ...page, styles, ...gStyles };
    }

    render() {
        return (
            <html>
                <Head>
                    <style id="glamor-styles" dangerouslySetInnerHTML={{ __html: this.props.css }} />
                    <style id="fabric-styles" dangerouslySetInnerHTML={{__html: _allStyles}} />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}
philipodev picture philipodev on 22 Sep 2017
👍4

Thank you! I will try today!

JunyuanZheng picture JunyuanZheng on 27 Sep 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

stale[bot] picture stale[bot] on 11 Apr 2018

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?

stale[bot] picture stale[bot] on 18 May 2018

Hi
I got the same issue, the styles are applying after a delay . I also did the _document.js as you explained but that's only giving me a new error about different classnames on server and client which makes some components without styles at all.

I Use next.js v7.0.2 with costume express server v4.14 , react v 16.6 and fabric v6.93

omidnavy picture omidnavy on 6 Nov 2018

Same issue

affanshahid picture affanshahid on 25 Dec 2018

i also have the same issue

SilverCoder picture SilverCoder on 1 Jan 2019

Same issue here.
But I found that the client className will overwrite the server's in the production but no in the dev mode. Just wondering is it possible to overwrite it as well in the dev mode

waitingkuo picture waitingkuo on 10 Feb 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

prashkan picture prashkan  路  3Comments
carruthe picture carruthe  路  3Comments
luisrudge picture luisrudge  路  3Comments
satbai picture satbai  路  3Comments
gabrielruss picture gabrielruss  路  3Comments