未分类

React SSR样式及SEO的实践_javascript技巧_脚本之家

31 3月 , 2020  

let context = { css: []}

案由在于服务器端渲染哪儿有window对象,哪儿有DOM啊。大家是经过编造DOM。renderToString那些措施生成出来的html字符串。stackoverflow搜了一晃开采了isomorphic-style-loader这一个特意用来同构的style-loader。

module: { rules: [{ test: /.css?$/, use: ['style-loader', { loader: 'css-loader', options: { importLoader: 1, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }] }]}

并在回到的html字符串中${helmet.title.toString()} ${helmet.meta.toString()}进展填空

// webpack.server.js module: { rules: [{ test: /.css?$/, use: ['isomorphic-style-loader', { loader: 'css-loader', options: { importLoader: 1, modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' } }] }] }

return window && document && document.all && !window.atob;^

ReferenceError: window is not defined

咱俩还精通在服务端渲染的时候有this.props.staticContext如此多个props得到大家设置context。另外isomorphic-style-loader提供给我们了

如上就是本文的全体内容,希望对大家的上学抱有助于,也指望大家多多点拨脚本之家。

withStylesHOC.js

今后依据readme所说的。在server端那样管理

费大力气通过多少个node中间层去落到实处首屏的SS福特Explorer,除开头屏速度之外,正是SEO那第一次全国代表大会块了,对于多少个商业网址来说实话很敬性格很顽强在荆棘满途或巨大压力面前不屈。

SSR中的SEO

自然SS福特Explorer-SEO绝不这么简单。仅仅在页面上增加head标签内增多title
和meta标签影响是少数的。8102年的搜寻爬虫已经不单单去相配title和
description,而是全稳的同盟(也便是说title和descript有震慑只是影响异常的小)搜索爬虫会把全副网址有着的文本搜集起来实行分析。

yarn dev
  ${helmet.title.toString()} ${helmet.meta.toString()} ${cssStr}   ${content}  window.context = { state: ${JSON.stringify} }   

当今服务器返给我们的html是那般的

ReactDOMServer.renderToString;const helmet = Helmet.renderStatic();
const cssStr = context.css.length ? context.css.join : '' return `   ssr ${cssStr}   ${content}  window.context = { state: ${JSON.stringify} }     `

在React顾客端渲染,增多样式相当的轻易。写多个css样式文件,在对应组件中援用。标签上通过className这个性子调用对应样式就万事Ok了。当然我们须要在webpack中配置loader来拆解解析css文件。日常的安插如下:

布局好了Run一下,不报错了而是会闪一下屏。禁用掉js发掘server端生成的html并未样式,当客商端JS接管程序以往才会有体制现身。那样的体验非常差。

SSR样式

跑一下劳务,开采命令行报这些错误:

万事,当然大家得以进一层优化,把componentWillMount所做的业务建议来搞一个HOC。

import React, { Component} from 'react'export default (DecoratedComponent, styles) => { return class NewComponent extends Component { componentWillMount () { if (this.props.staticContext) { this.props.staticContext.css.push } } render () { return  } }}

自然我们真的并未有向服务器端生成的HTML加多style标签。

前一篇首要记录了弹指间SSENVISION配置以致构成Redux的选拔。这里大致说一下React
SS牧马人中样式管理和更温婉的SEO

内需先经过css-loader解析css文件,之后再通过style-loader将样式放在html的style标签中。

// Home.jaximport { Helmet } from 'react-helmet'class Home extends Component { render() { return (   SRR-Home  ... ... > ) }}
componentWillMount () { if (this.props.staticContext) { // 只有服务端渲染时候有this.props.staticContext以及_getCss() this.props.staticContext.css.push }}

此时大家想到了context那些东西。在server端render以前。大家设置一个

此地我们使用github上的二个库react-helmet第一需求在对应的页面组件中引进react-helmet,就足以在Helmet标签内随机增加title、meta咯

如此那般总结的包裹一个HOC,之后涉及体制的时候一直通过withStylesHOC包裹一下就好。举例叁个组成Redux的Home组件:

SEO(Search Engine Optimization)–
通过一些技巧手腕让网址在追寻引擎的名次尽量靠前一点。由于客商端渲染出来的网址唯有“

那般的html节点。大好些个寻觅引擎分析不出去网址上有何。SSCR-V直接渲染出来HTML,那样对搜索引擎就融洽了无数。

话非常的少少搞起来。顾客端的webpack配置无需改换照旧选取css-loader+style-loader。服务器端就应用css-loader+isomorphic-style-loader了

这便是说SS酷威也这样行吧~

题外话顺便说一下怎么着做好SEO。七个网址仅仅三大块内容,文字、多媒体、链接。要到位的是文字的原创性,图片的原创性以至高清度还会有站内链接尽量和站内内容有关。

_getCss(卡塔尔国那些法子。能够在SS奥德赛进度中获得样式。有了那八个必要条件。大家就足以在每二个用到样式的Component中通过componentWillMount以此生命周期

SSR-SEO

与上述同类样式就存款和储蓄在context以此变量的css数组中咯,退换一下server端的html输出代码:

export default connect(mapState, mapDispatch)(withStyle

那正是说如何办好SEO

return `   ssr   ${ content }  window.context = { state: ${ JSON.stringify } }     `


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图