ユニバーサルレンダリングは、DOMContentLoadedイベントとLoadイベントの間に遅延を発生させます。

私はスタイリッシュなコンポーネントに非常に興奮しています...これはそうでない場合に使用するのが大好きです。
次の2つのプロジェクト例を用意しました。 jsユニバーサルレンダリングライブラリ。
最初の例では、スタイリングされたコンポーネントをソリューションとして使用しています.2番目の例では、CSSのデフォルトソリューションであるstyled-jsxを使用しています。
両方の例には、最小限の複雑さで正確に同じコードが含まれています。すぐに分かるように、Styled-Componentsの例では、DOMContentLoadedイベントとLoadイベントの間に、ユーザーが実際にスタイルのないHTMLマークアップを見るのには邪魔な遅延がありますが、2番目の例ではstyled-jsxを使用していますケース。
1からhttps://github.com/Ajar-Ajar/next-demo--styled-components
2からhttps://github.com/Ajar-Ajar/next-demo--styled-jsx ユニバーサルレンダリングは、DOMContentLoadedイベントとLoadイベントの間に遅延を発生させます。

、私は非常に多くなります - - https://01-styled-components-sqprkdqeft.now.sh

githubの上で利用可能なソース
1：両方のデモは今ツァイトを使用して、オンラインでホストされている

なぜそれが1つではなく他のもので起こるのかについての洞察を高く評価してください。もちろん、私がこのような行動を修正する方法はありますか多くの機能や利点のために、スタイル付きのコンポーネントを使うことが大好きです。

がここに欠けている何に
半開き
:)

出典

2017-03-15 Ajar

ありがとうございました、サーバー上のスタイルの注射です。基本的に、JavaScriptでスタイルを書くときには、生成されたスタイルをサーバー上で取得し、生成されたHTMLにstyleタグとして挿入する必要があります。我々は注入方法

import Document, { Head, Main, NextScript } from 'next/document' 
import { styleSheet } from 'styled-components' 

export default class MyDocument extends Document { 
    static async getInitialProps ({ renderPage }) { 
    const page = renderPage() 
    const styles = (
     <style dangerouslySetInnerHTML={{ __html: styleSheet.rules().map(rule => rule.cssText).join('\n') }} /> 
    ) 
    return { ...page, styles } 
    } 

    render() { 
    return (
     <html> 
     <Head> 
      <title>My page</title> 
     </Head> 
     <body> 
      <Main /> 
      <NextScript /> 
     </body> 
     </html> 
    ) 
    } 
}

お知らせ：

次のための組み込みソリューションは、styled-componentsで、手動作業のほんの少しを行うと、このようになりますpages/_document.jsファイルを追加する必要があり、あなたのためにこれを自動的に行いますスタイルはstyled-componentsのスタイルタグです。これはすべてのことです、今すぐunstyledコンテンツのフラッシュがなくなった！（これはthe official exampleから取られる）

注：styled-componentsのv2ではでは（すぐに来て、私は次の@スタイルのコンポーネントを--save NPM `で、今それを得ることができます）がありますSSRの公式APIので、それはより次のようになります：

import Document, { Head, Main, NextScript } from 'next/document' import styleSheet from 'styled-components/lib/models/StyleSheet' export default class MyDocument extends Document { static async getInitialProps ({ renderPage }) { const page = renderPage() const styles = ( <style dangerouslySetInnerHTML={{ __html: styleSheet.getCSS() }} /> ) return { ...page, styles } } render() { return ( <html> <Head> <title>My page</title> </Head> <body> <Main /> <NextScript /> </body> </html> ) } }

希望に役立つこと！

出典

2017-03-22 20:22:24 mxstbr

ユニバーサルレンダリングは、DOMContentLoadedイベントとLoadイベントの間に遅延を発生させます。

答えて

関連する問題