styled-components：FOUCについて心配しています

私はstyled-componentsパッケージに入っています。私は開発者にとって使い勝手が素晴らしいと思います！styled-components：FOUCについて心配しています

しかし、私は1つのことを心配しています：Flash Of Unstyled Content

開発ではもちろんのこと、開発でも、スタイルはjavascriptチャンクでパッケージ化されています。コンポーネントがロードされると、スタイルが生成され、<head>の下に追加されます。
これは、CSSモジュールの動作と本質的に同じです。

surviveJSの投稿を参照して、私はExtractTextPluginを使用して、プロダクションビルドのステップで別のスタイルシート（CSSファイル）を作成する方法を学びました。

しかし、styled-componentsのCSSはJSなので、そのテクニックは使用できません（少なくとも、動作させることはできませんでした）。

だから、私はスタイリッシュなコンポーネントで私の次のプロジェクトを構築する前に、誰かが私の心配を取り除くことができますか？

2017-03-12 publicJorn

UIをフラッシュしたくない場合は、JSを使用してレンダリングする代わりに、サーバーからスタイルを送信する必要があります。幸いにも、styled-componnetsライブラリは、現時点では公開されていませんが、サーバレンダリングAPIをサポートしています。

サーバーでスタイルを事前にレンダリングし、サーバーから送信した最初のhtmlに挿入することができます。そのため、CSSが含まれUIは点滅しません。

私が言及したように、APIはまだ公開されていませんが、使用することはできます。これについてGithubで複数のディスカッションがありますので、this、this、more issuesを確認してください。私は公開APIはv2リリースで準備ができているはずだと思います。

基本的に、点滅を防ぐためにstyled-componentsを使用することで問題はありません。

2017-03-13 06:14:01

お役立ち情報残念ながら、サーバー側のレンダリングはこのプロジェクトのオプションではありません – publicJorn

SSRが現時点で使用できるようになります。これを行う方法の例を次に示します。

2017-03-13 06:41:10 Joe

答えて