Closed mikemclin closed 6 years ago
Styles are rendered correctly when I run the app locally using next
command.
Got same issue.
I'm still searching for a solution on this. Haven't been able to find one yet. It appears this boilerplate project ananddayalan/nextjs-in-firebase-with-bootstrap is having the same issue. You can see his FOUC on their demo: https://nextjs-in-firebase-functions.firebaseapp.com/ (note that the layout is controlled via style-jsx, the rest of the styles are coming from a CSS file)
Anybody found a solution for this? I also got the same issue.
@mikemclin Did you found a solution for this?
@JohnWooS No. I will definitely post back here if I find something. I've tried borrowing config from the Firebase Functions Next.js Example and literally any type of Firebase/Next.js boilerplate I could find on Github. No luck.
I'm sort of just hoping for an official word at this point. I just wish I knew if it was broken, or if I haven't found the magic config sauce yet (even if it is hacky).
@mikemclin Have you found any Nextjs/Firebase project where this doesn't occur but where there's no discernable difference in the codebase?
@jthegedus No. I have never seen styled-jsx work with SSR on Firebase Cloud Functions.
I have been playing around with this and I think I have fixed it for myself. I created a custom _document.js
but it just implements the basic Document
functionality.
import Document, { Head, Main, NextScript } from "next/document";
import flush from "styled-jsx/server";
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const { html, head, errorHtml, chunks } = renderPage();
const styles = flush();
return { html, head, errorHtml, chunks, styles };
}
render() {
return (
<html>
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
I then included styled-jsx as an actual dependency of my app. This combination seemed to fix my first FOUC that I would see on loading.
@andyeskridge solution worked for me. I simply added the _document.js
file to my pages
directory with the content he provided.
I also tried to create a _document.js
file that only contained...
module.exports = require('next/document');
...but it failed to render SSR styles.
@mikemclin I just solved this issue as well, the important bit from @andyeskridge's custom _document.js
is the flush()
after calling renderPage()
.
I'm guessing this might have been solved by Next.js 5 (universal webpack)
Expected Behavior
I visit homepage and expect to see styled content immediately.
Current Behavior
Webpage does not immediately render styles in
<style jsx>
tags. It does however, render styles declared explicitly within a componentsstyle
attribute. For example, in the code below, the text is blue on page load (immediately), but the.hello
styles do not load immediately.Steps to Reproduce (for bugs)
I am using Firebase Cloud Functions for the server portion of app. The
.babelrc
file is used both fornext build
and for a custom deployment step I need to perform to get the source files working on Cloud Functions. Firebase Cloud Functions do not installdevDependencies
, and it was complaining that bothbabel-runtime
andstyled-jsx
were not found, so I added them to my dependency list.