Skip to content

Commit 107ce3c

Browse files
MuYunyunMuYunyun
committed
feat: combile SSR in prerender to prevent shake problem
1 parent 7fbe6a6 commit 107ce3c

File tree

15 files changed

+160
-61
lines changed

15 files changed

+160
-61
lines changed

‎packages/crd-client-utils/.npmrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# .npmrc
2+
3+
registry=https://registry.npmjs.org/
4+
5+
# https://github.com/sass/node-sass#binary-configuration-parameters
6+
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
7+
8+
# https://github.com/Medium/phantomjs#deciding-where-to-get-phantomjs
9+
# phantomjs_cdnurl=http://cnpmjs.org/downloads
10+
phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs

‎packages/crd-client-utils/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### crd-client-utils
2+
3+
[create-react-doc](https://github.com/MuYunyun/create-react-doc) 的工具包。

‎packages/crd-theme/utils/index.js‎ renamed to ‎packages/crd-client-utils/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
// eslint-disable-next-line no-undef
1+
const ifDev = env === 'dev'
22
const ifProd = env === 'prod'
33
const ifPrerender = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender
44

5-
export { ifProd, ifPrerender }
5+
export {
6+
ifDev,
7+
ifProd,
8+
ifPrerender
9+
}

‎packages/crd-client-utils/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "crd-client-utils",
3+
"version": "1.5.0",
4+
"description": "Utils with create react doc",
5+
"main": "index.js",
6+
"dependencies": {},
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/MuYunyun/create-react-doc",
10+
"directory": "packages/utils"
11+
},
12+
"keywords": [],
13+
"publishConfig": {
14+
"access": "public"
15+
},
16+
"author": "muyunyun",
17+
"license": "MIT",
18+
"gitHead": "ffc5e4cbc94a7356da558c2dbf46e2f39bb8b199"
19+
}

‎packages/crd-scripts/src/web/Router.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,12 @@ const RoutersContainer = withRouter(({ ...props }) => {
6565
)
6666
})
6767

68-
export default function RouterRoot() {
68+
export default function RouterRoot({
69+
pointRender
70+
}) {
6971
return (
7072
<BrowserRouter>
71-
<RoutersContainer />
73+
<RoutersContainer pointRender={pointRender} />
7274
</BrowserRouter>
7375
)
7476
}

‎packages/crd-scripts/src/web/index.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
11
import ReactDOM from 'react-dom'
2+
import ReactDOMServer from 'react-dom/server'
23
import '@babel/polyfill'
4+
import { ifDev, ifPrerender } from 'crd-client-utils'
35
import RouterRoot from './Router'
46

5-
ReactDOM.render(
6-
<RouterRoot />,
7-
document.getElementById('root'),
8-
)
7+
if (ifDev) {
8+
// dev render
9+
document.getElementById('root').innerHTML = ReactDOMServer.renderToString(<RouterRoot />)
10+
ReactDOM.hydrate(
11+
<RouterRoot />,
12+
document.getElementById('root'),
13+
)
14+
} else if (ifPrerender) {
15+
// prerender
16+
document.getElementById('root').innerHTML = ReactDOMServer.renderToString(<RouterRoot />)
17+
} else {
18+
// prod render:
19+
ReactDOM.hydrate(
20+
<RouterRoot />,
21+
document.getElementById('root'),
22+
)
23+
}

‎packages/crd-seed/component/Affix/affix.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useState, useLayoutEffect, useRef } from 'react'
1+
// import { useState, useLayoutEffect, useRef } from 'react'
2+
import { useState, useEffect, useRef } from 'react'
23
import { throttle } from './utils'
34

45
const Affix = ({
@@ -22,7 +23,8 @@ const Affix = ({
2223
// 是否是绝对布局模式
2324
const fixedRef = useRef(false)
2425
const [fixed, setFixed] = useState(fixedRef.current)
25-
useLayoutEffect(() => {
26+
// useLayoutEffect(() => {
27+
useEffect(() => {
2628
widthRef.current = width
2729
}, [width])
2830
const validValue = (value) => {
@@ -98,12 +100,14 @@ const Affix = ({
98100

99101
const scroll = throttle(handleScroll, 20)
100102

101-
useLayoutEffect(() => {
103+
// useLayoutEffect(() => {
104+
useEffect(() => {
102105
// 在子节点移开父节点后保持原来占位
103106
setWrapperDimension()
104107
}, [fixed, width])
105108

106-
useLayoutEffect(() => {
109+
// useLayoutEffect(() => {
110+
useEffect(() => {
107111
if (target) scrollElm = target()
108112
scrollElm.addEventListener('scroll', scroll)
109113
return () => {

‎packages/crd-seed/component/Menu/SubMenu.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useState, useRef, useLayoutEffect, Fragment, Children, cloneElement } from 'react'
1+
// import { useState, useRef, useLayoutEffect, Fragment, Children, cloneElement } from 'react'
2+
import { useState, useRef, useEffect, Fragment, Children, cloneElement } from 'react'
23
import cx from 'classnames'
34
import Transition from './transition'
45
import { getMenuStyle } from './util'
@@ -42,7 +43,8 @@ function SubMenu({
4243

4344
const gapDistance = 4
4445
/** 使用 useLayoutEffect 可以避免 useEffect 产生可见的位移痕迹 */
45-
useLayoutEffect(() => {
46+
// useLayoutEffect(() => {
47+
useEffect(() => {
4648
if (popupSubMenu.current && curSubmenu.current) {
4749
popupSubMenu.current.style.left = `${curSubmenu.current.getBoundingClientRect().right +
4850
gapDistance}px`

‎packages/crd-seed/component/Menu/transition.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useLayoutEffect, useRef, useCallback } from 'react'
1+
// import { useLayoutEffect, useRef, useCallback } from 'react'
2+
import { useEffect, useRef, useCallback } from 'react'
23
import styles from './style/index.less'
34

45
const ANIMATION_DURATION = 200
@@ -74,7 +75,8 @@ export default function Transition({
7475
[beforeLeave, enter, leave]
7576
)
7677

77-
useLayoutEffect(() => {
78+
// useLayoutEffect(() => {
79+
useEffect(() => {
7880
if (!mounted.current) {
7981
mounted.current = true
8082
beforeEnter()

‎packages/crd-seed/layout/index.js‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as React from 'react'
22
import { Switch, Link, Route, Redirect } from 'react-router-dom'
33
import cx from 'classnames'
4+
import { ifDev, ifProd, ifPrerender } from 'crd-client-utils'
45
import Menu from '../component/Menu'
56
import Icon from '../component/Icon'
67
import Affix from '../component/Affix'
78
import Header from '../component/Header'
89
import Footer from '../component/Footer'
910
import languageMap from '../language'
10-
import { isMobile, ifAddPrefix, ifProd, ifPrerender } from '../utils'
11+
import { isMobile, ifAddPrefix } from '../utils'
1112
import { getOpenSubMenuKeys } from './utils'
1213
import logo from '../crd.logo.svg'
1314
import styles from './index.less'
@@ -21,11 +22,15 @@ function BasicLayout({
2122
routeData,
2223
menuSource,
2324
indexProps,
25+
// render area
26+
pointRender
2427
}) {
2528
const { pathname } = location
2629
const { user, repo, branch = 'main', language = 'en', menuOpenKeys } = DOCSCONFIG || {}
2730
const [inlineCollapsed, setInlineCollapsed] = useState(true)
2831
const [selectedKey, setSelectedKey] = useState('')
32+
const [monted, setMounted] = useState(false)
33+
const [routeChanged, setRoutedChanged] = useState(false)
2934
const curOpenKeys = getOpenSubMenuKeys({
3035
pathname,
3136
menuSource,
@@ -59,6 +64,17 @@ function BasicLayout({
5964
setSelectedKey(newPathName || defaultPath)
6065
}, location.pathname)
6166

67+
useEffect(() => {
68+
setMounted(true)
69+
}, [])
70+
71+
useEffect(() => {
72+
const { pathname } = location
73+
if (monted) {
74+
setRoutedChanged(true)
75+
}
76+
}, location.pathname)
77+
6278
const scrollToTop = () => {
6379
document.body.scrollTop = 0
6480
document.documentElement.scrollTop = 0
@@ -229,6 +245,7 @@ function BasicLayout({
229245
)
230246
}
231247

248+
// Target: The first screen not to do renderContent logic. The second screen do.
232249
const renderContent = () => {
233250
return (
234251
<div
@@ -261,26 +278,39 @@ function BasicLayout({
261278
</div>
262279
)
263280
}
281+
282+
console.log('routeChanged', routeChanged)
264283
return (
265-
<div className={styles.wrapper}>
266-
<Header
267-
logo={logo}
268-
href={ifAddPrefix ? `/${repo}` : `/`}
269-
location={location}
270-
indexProps={indexProps}
271-
menuSource={menuSource}
272-
/>
273-
<div
274-
className={cx(styles.wrapperContent, {
275-
[styles.wrapperMobile]: isMobile,
276-
})}
277-
>
278-
{renderPageHeader()}
279-
{renderMenuContainer()}
280-
{renderContent()}
281-
<Footer inlineCollapsed={inlineCollapsed} />
282-
</div>
283-
</div>
284+
<>
285+
{
286+
// pointRender === 'menu' && !routeChanged
287+
// prod render
288+
// ? renderMenuContainer()
289+
// pre & dev render
290+
// : <div className={styles.wrapper}>
291+
<div className={styles.wrapper}>
292+
<Header
293+
logo={logo}
294+
href={ifAddPrefix ? `/${repo}` : `/`}
295+
location={location}
296+
indexProps={indexProps}
297+
menuSource={menuSource}
298+
/>
299+
<div
300+
className={cx(styles.wrapperContent, {
301+
[styles.wrapperMobile]: isMobile,
302+
})}
303+
>
304+
{renderPageHeader()}
305+
{/* <div id="menuPosition"> */}
306+
{renderMenuContainer()}
307+
{/* </div> */}
308+
{renderContent()}
309+
<Footer inlineCollapsed={inlineCollapsed} />
310+
</div>
311+
</div>
312+
}
313+
</>
284314
)
285315
}
286316

0 commit comments

Comments
 (0)