Далее. js 9+ FOU C (Fla sh или нестилизованный контент) со стилизованными компонентами - PullRequest
Новая
       38

Далее. js 9+ FOU C (Fla sh или нестилизованный контент) со стилизованными компонентами

0 голосов
/ 02 августа 2020

Потратил пару дней на поиск решений и идей из большей части SA и Reddit, но безрезультатно ..

При загрузке как в производственной, так и в локальной среде каждая загрузка представляет все html без каких-либо стили до внедрения в DOM ..

В настоящее время это ключевые файлы моих проектов:

_document.js

import { ServerStyleSheet } from "styled-components";
import Document, { Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <html lang="en">
      <Head>
        <title>namesjames</title>
        <link rel="icon" href="/favicon.ico" />
        <script src="/static/chrome-fix.js" />
        <link href="/above-the-fold.css" />
      </Head>
        <body>

          <script src="/noflash.js" />
          <Main />
          <NextScript />
          <script> </script>
        </body>
      </html>
    );
  }
}

_app.js

/* eslint-disable class-methods-use-this */
import App from "next/app";
import React from "react";
import { ThemeProvider } from "styled-components";
import { ParallaxProvider } from 'react-scroll-parallax';
import Header from "../components/Header";
import theme from "../theme";
import GlobalStyles from "../GlobalStyles";
import DarkModeToggle from '../components/toggle/toggleMode';
import Footer from '../components/Footer'
import LazyLoad from 'react-lazy-load';
import Router from 'next/router';
import styled from 'styled-components'
// import '../style.css'


const Loaded = styled.div`
  opacity: ${(props) => props.loaded ? "1" : "0"};
`

export default class MyApp extends App {
  state = { isLoading: false, loaded: false }

  componentDidMount() {
    // Logging to prove _app.js only mounts once,
    // but initializing router events here will also accomplishes
    // goal of setting state on route change
    console.log('MOUNT');
    this.setState({loaded: true})



    Router.events.on('routeChangeStart', () => {
      this.setState({ isLoading: true });
      console.log('loading is true, routechangeStart')
    });

    Router.events.on('routeChangeComplete', () => {
      this.setState({ isLoading: false });
      console.log('loading is false, routeChangeComplete')
    });

    Router.events.on('routeChangeError', () => {
      this.setState({ isLoading: false });
      console.log('loading is false, routeChangeError')
    });
  }
  render(): JSX.Element {
    const { isLoading } = this.state;
    const { Component, pageProps, router, loaded } = this.props;
    return (
      <Loaded loaded={this.state.loaded}>
        <ThemeProvider theme={theme}>
          <GlobalStyles />
          <ParallaxProvider>
          <Header />
           {isLoading && 'STRING OR LOADING COMPONENT HERE...'}
          <Component {...pageProps} key={router.route} />
          <LazyLoad offsetVertical={500}>
            <Footer />
          </LazyLoad>
          </ParallaxProvider>
          <DarkModeToggle />
        </ThemeProvider>
      </Loaded>
    );
  }
}

index.js

import { color } from "styled-system";
import { OffWhite } from "../util/tokens";
import Hero from "../components/Hero";
import Banner from  '../components/Banner'
import TitleText from '../components/TitleText'
import HomeTitleCopyScene from '../components/HomeTitleCopyScene'
import TwoCards from '../components/TwoCards'
import LazyLoad from 'react-lazy-load';

function Home(): JSX.Element {
  return (
    <div className="container">
      <Banner />
      <HomeTitleCopyScene />
      <LazyLoad offsetVertical={1000}>
        <TwoCards />
      </LazyLoad>
    </div>
  );
}

export default Home;

Как некоторые могли заметить, я пробовал несколько реализаций и немного смущен тем, что это могло быть на данном этапе ..

Любая помощь приветствуется и я могу предоставить дополнительную информацию по запросу .. Большое спасибо

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Я нашел два решения, которые помогли ->

  1. Было жесткое определение непрозрачности: 0 в JSX, а затем при вставке стиля в DOM, применяя непрозрачность: 1! Important к любому из отображаемых компонентов ..

<section className="cards-block" style={{opacity:0}}>

Хотя сегодня утром это было эффективно, я обнаружил, что в какой-то момент в процессе разработки я неправильно импортировал Head из next/head и использовал его в своем _document.js вместо того, чтобы использовать правильный Head из next/documents .. 
// import Head from "next/head"; --> incorrect
import { ServerStyleSheet } from "styled-components";
import Document, { Head, Main, NextScript } from "next/document";

Er go -> правильный рендеринг и внедренный элемент без FOU C

Надеюсь, это поможет кому-то

0 голосов
/ 14 августа 2020

Я нашел обходной путь для моего небольшого проекта портфолио:

просто включил этот встроенный css в <head> моего пользовательского _document.js: 

{<style dangerouslySetInnerHTML={{__html: `

    html {background: #333}
    body #__next div {visibility: hidden}
    body.loaded #__next div {visibility: visible}

`}}></style>}

"загруженный" класс добавляется в тело в _app.js: 

if (process.browser) {
    document.body.classList.add("loaded")
}

Я уверен, что если это хорошее решение, любой совет будет оценен :)

...