修改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
##### 如create-next-app
项目根目录创建components文件夹并在其中创建Header.js
创建文件`./pages/_document.js`
```jsx
import React from 'react'
import Head from 'next/head'
import Document, { Html, Head, Main, NextScript } from 'next/document'
const Header = () => (
<div className="header">
<Head>
<title></title>
<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'];
`
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
</script>
render() {
return (
<Html>
{/* <Head /> */}
<Head>
<script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>
</Head>
</div>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default Header
export default MyDocument
```
```jsx
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(import('../components/Header'), {
ssr: false
})
const ReactLive2d = dynamic(import('react-live2d'), {
ssr: false
})