反应SSR风格和搜索引擎优化实践

上一篇文章主要记录了SSR的配置及其与Redux的结合使用。这里简单说说React SSR中的风格处理和更优雅的SEO

SSR风格

在React客户端上渲染时，很容易添加样式。编写一个css样式文件，并在相应的组件中引用它。在标签上，通过属性类名调用相应的样式是可以的。当然，我们需要在webpack中配置loader来解析css文件。一般配置如下(使用css模块):

module : { rule s 3360 [{ test :/\。css？$/，uses :[' style-loader '，{ loader: 'css-loader '，options : { import loader : 1，modules: true，Localidenname : '[name]_[local]_[hash 3360 base 64:5]' }]}需要通过css-loader解析css文件，然后通过style-loader将样式放入html样式标签中。

所以SSR也能做到吗~

纱线开发人员运行该服务，发现命令行报告了此错误：

返回窗口文档文档。全部！window.atob^

未定义参考错误：窗口

原因是在服务器渲染中有窗口对象和DOM的地方。我们使用虚拟DOM。RenderToString是由这个方法生成的html字符串。Stackoverflow搜索发现了同构风格的加载器，专门用于同构。

不要多说话。不需要更改客户端的webpack配置，也不需要使用css加载器样式加载器。在服务器端，使用了CSS加载器同构样式加载器(就像样式加载器一样)

//web pack . server . js module : { rules : [{ test :/\。css？$/，use: ['同构样式加载程序'，{ loader: 'css-loader '，options: { importLoader: 1，modules: true，localiidentname : '[name]_[local]_[hash : base 64:5]' }]}配置为运行一次，不会报告错误，但屏幕会闪烁。禁用js时，发现服务器生成的html中没有样式，只有客户端JS接管程序后才会出现。这是一次可怕的经历。

当然，我们没有给服务器生成的HTML添加样式标签。

现在服务器返回给我们的html是这样的

返回` html head title SSR/title/head body div id=' root ' $ { content }/div script window . context={ state : $ { JSON . stringify(store . getstate())}/script script src='/index . js '/script/body/html `这时，我们想到了上下文。在服务器端呈现之前。我们建立了一个

让context={css: []}我们还知道，this . props . static context是一个道具，在服务器上呈现时，它会获取我们的设置上下文。此外，同构风格的加载器提供给我们

方法_getCss()。可以在SSR过程中得到样式。有了这两个必要条件。我们可以在每个使用样式的组件中传递组件的生命周期

添加这样一段代码：

componentwillmount(){ if(this . props . static context){//this。props.staticcontext和_getCss()仅在服务器端呈现时可用。这个。道具。staticcontext.css.push(样式。_ getcss ())}}为了将样式存储在上下文变量的css数组中，请在服务器端转换html输出代码：

const CSSTr=context . CSS . length？context.css.join('\ n') : ' '返回` html head title SSR/title style $ { csstr }/style/head body div id=' root ' $ { content }/Divscript window . context={ state : $ { JSON . stringfy(store . getstate())} }/script script src='/index . js '/script/body/html `一切当然，我们可以进一步优化，并调出componentWillMount为创建一个HOC(高级组件)所做的工作

withStylesHOC.js

从“react”导入React，{ Component}导出默认值(Detained Component，styles)={ return class new Component扩展Component { ComponentWillMount(){ if(this . props . static context){ this。props.staticcontext.css.push(样式。_ getcss())} } render(){返回修饰的组件}.这个。props}/}}}只需封装一个HOC，然后当涉及到样式时，直接通过withStylesHOC进行封装。例如，与Redux结合的主组件：

导出默认连接(地图状态，地图调度) (样式(主页，样式))

SSR-SEO

通过一个节点中间层实现第一个屏幕的SSR需要很大的努力。除了第一屏的速度，它是SEO的一大块，对于一个商业网站来说确实很重要。

SEO(搜索引擎优化)通过一些技术手段，让网站在搜索引擎中的排名尽可能靠前。客户端呈现的网站只有像div id='root '这样的html节点。大多数搜索引擎无法分析网站上的内容。SSR直接渲染HTML，对搜索引擎友好多了。

SSR中的搜索引擎优化

在这里，当我们在github上使用一个库时，我们首先需要在相应的页面组件中引入react-头盔，然后我们可以在头盔标签中自由添加title和meta

//Home.jaximport {头盔}来自' react-头盔'类Home扩展了Component { render(){ return(Fragment)头盔titleSRR-Home/根据title后的自述meta name=' description' content='这是一个Home组件'/头盔./fragment)}}。在服务器端处理这个问题

reactdomserver . rendertostring(Handler/)；const头盔=头盔. renderstatic()；用$ {头盔. title . tostring()} $ {头盔. meta.tostring ()}填充返回的html字符串

html head $ {头盔. title . tostring()} $ {头盔. meta . tostring()} style $ { csstr }/style/head body div id=' root ' $ { content }/Divscript window . context={ state : $ { JSON . stringify(store . getstate())} }/script script src='/index . js '/script/body/html，再运行一次！

当然，SSR-SEO也没那么简单。在页面的标题标签内添加标题和元标签的效果是有限的。在8102中，搜索爬虫不仅匹配标题和描述，而且完全匹配(也就是说标题和描述有影响但影响不大)。搜索爬虫收集整个网站的所有文本进行分析。

那么如何做好SEO呢

对了，怎么做好SEO。一个网站无非就是三块内容，文字，多媒体和链接。我们要做的是文字的原创性，图片的原创性，高清性，站内的链接尽量与站内内容相关。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。