dxx/react-ssr

关于css的同构

1111mp opened this issue · 2 comments

请教一下 有考虑使用isomorphic-style-loader来解决css造成的页面第一次加载的闪烁问题吗

我在你的这个demo的基础上 配置了isomorphic-style-loader

但是在App.jsx中 处理初始化的css的时候 会出现 页面点击路由跳转不会重新render的情况

import styles from "./assets/app.css";

import React from "react";
import {
  Switch,
  Redirect,
  NavLink
} from "react-router-dom";
import { Helmet } from "react-helmet";
import { router, NestedRoute, StatusRoute} from "./router";
import withStyles from "isomorphic-style-loader/withStyles";

class App extends React.Component {
  render() {
    return (
      <div>
        <Helmet>
          <title>This is App page</title>
          <meta name="keywords" content="React SSR"></meta>
        </Helmet>
        <div className="title">This is a react ssr demo</div>
        <ul className="nav">
          <li><NavLink to="/bar">Bar</NavLink></li>
          <li><NavLink to="/baz">Baz</NavLink></li>
          <li><NavLink to="/foo">Foo</NavLink></li>
          <li><NavLink to="/top-list">TopList</NavLink></li>
        </ul>
        <div className="view">
          <Switch>
            {
              router.map((route, i) => 
                <NestedRoute key={i} {...route}/>
              )
            }
            <Redirect from="/" to="/bar" exact/>
            <StatusRoute code={404}>
              <div>
                <h1>Not Found</h1>
              </div>
            </StatusRoute>
            {/*<Route path="/bar" component={Bar} />
            <Route path="/baz" component={Baz} />
            <Route path="/foo" component={Foo} />
            <Route path="/top-list" component={TopList} />
            <Redirect from="/" to="/bar" exact />
            */}
          </Switch>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(App);

image
比如这里 点击了Baz 路由跳转了 但是页面没有重新render

请问能指教一下吗

dxx commented

isomorphic-style-loader 这个我没有用过。

关于第一次 css 没有同构的问题,这个在 master 分支和 webpack4.x 分支解决了。主要原因是原来的分支用了 loadable-components 2.2.3,不支持提取访问路由组件的 css。后面 @loadable/component 提供了获取组件的 css api。renderer.js 中有获取组件 css 并放入 html 头部的代码。

使用@loadable/component其实是添加了link标签去preload对应的css文件 但是服务端dom string到web渲染的时候其实这部分资源是还没请求到的 所以还是会有css造成的闪烁的问题
我后来用isomorphic-style-loader解决了 谢谢啊 忘了关闭 不好意思
多谢 热更新那部分 真的强!谢谢谢谢~