Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fabric SSR integration with Next.js #2740

Closed
junyuanz123 opened this issue Sep 5, 2017 · 8 comments
Closed

Fabric SSR integration with Next.js #2740

junyuanz123 opened this issue Sep 5, 2017 · 8 comments

Comments

@junyuanz123
Copy link

junyuanz123 commented Sep 5, 2017 •
edited

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!
@philipodev
Copy link

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>
        );
    }
}

@junyuanz123
Copy link
Author

Thank you! I will try today!

@stale
Copy link

stale bot commented Apr 11, 2018

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
Copy link

stale bot commented May 18, 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 stale bot closed this as completed May 18, 2018
@omidnavy
Copy link

omidnavy commented Nov 6, 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

@affanshahid
Copy link

Same issue

@SilverCoder
Copy link

i also have the same issue

@waitingkuo
Copy link

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

@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@waitingkuo @SilverCoder @junyuanz123 @omidnavy @affanshahid @philipodev @msft-github-bot