打开服务后,每次刷新字体样式都会闪一下

来源:2-5 服务端渲染基础配置

MeSKiL

2019-06-12

export default class App extends React.Component{
    render(){
        return <div>
            This is webApp
        </div>
    }
}
app.get('*',function (req,res) {
    res.send(template.replace('<app></app>','<div>3333</div>'))
})

我将代码改成这样后,页面先闪(大字体的)3333,而后变回小字体的This is webApp。

app.get('*',function (req,res) {
    const appString = ReactSSR.renderToString(serverEntry);
    res.send(template.replace('<app></app>',appString))
})

这样时,代码先为(大字体的This is webApp),然后跳成小字体的(This is webApp)。我觉得大字体是服务端渲染的,小字体是客户端渲染的。所以,无论客户端与服务端是否一致,最后采取的还是客户端渲染的内容,是这样吗。还是说,一致则采取服务端,不一致重新采取客户端?

<div id="root"><div data-reactroot="">This is webApp</div></div>
<script type="text/javascript" src="/public/index_09441106.js"></script></body>

因为虽然把<app></app>变成了This is webApp,但是下面的js代码依旧会执行,并把root的内容改回客户端渲染的内容啊。
如果是这样,那么服务端渲染的作用 seo(做到了) 首屏加载快(也做到了) 。但是首屏加载虽然快,但是最后显示的还是客户端的内容啊,会闪一下

写回答

1回答

Jokcy

2019-06-12

是的,最终客户端的输出肯定是客户端渲染的,服务端渲染的只是首次请求的内容。后面会有解决方法的,关于样式方面的,你可以先看下去

1
1
MeSKiL
非常感谢!
2019-06-13
共1条回复

React全栈+服务器渲染(ssr)打造社区Webapp

【毕设面试】只会写业务代码?out了,带你学会搭建属于自己的工程!

768 学习 · 414 问题

查看课程