修改SSR引入方式

SSR使用看板娘时,使用自定义Document引入基础依赖
This commit is contained in:
chendishen 2020-09-21 22:22:44 +08:00 committed by GitHub
parent 2d8e100275
commit c41f452d5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -84,39 +84,38 @@ const App = () => (
## 🔨 Usage for SSR ## 🔨 Usage for SSR
##### 如create-next-app ##### 如create-next-app
项目根目录创建components文件夹并在其中创建Header.js 创建文件`./pages/_document.js`
```jsx ```jsx
import React from 'react' import Document, { Html, Head, Main, NextScript } from 'next/document'
import Head from 'next/head'
const Header = () => ( class MyDocument extends Document {
<div className="header"> static async getInitialProps(ctx) {
<Head> const initialProps = await Document.getInitialProps(ctx)
<title></title> return { ...initialProps }
<meta name="viewport" content="initial-scale=1.0, width=device-width" /> }
<script>
{
`
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://publicjs.supmiao.com/live2dcubismcore.min.js'];
`
}
</script>
</Head>
</div>
)
export default Header render() {
return (
<Html>
{/* <Head /> */}
<Head>
<script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
``` ```
```jsx ```jsx
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(import('../components/Header'), {
ssr: false
})
const ReactLive2d = dynamic(import('react-live2d'), { const ReactLive2d = dynamic(import('react-live2d'), {
ssr: false ssr: false
}) })
@ -180,4 +179,4 @@ api 文档 (待完善,如有需要功能欢迎提[issue](https://github.com/
当menuList 传入非空数组时,其中的字段: 当menuList 传入非空数组时,其中的字段:
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
| :-----: | ----- | ----- | ----- | | :-----: | ----- | ----- | ----- |
| Mtab | 切换看板娘 | String | 'Mtab' | | Mtab | 切换看板娘 | String | 'Mtab' |