mirror of
https://github.com/chendishen/react-live2d.git
synced 2024-11-26 06:07:02 +08:00
修改SSR引入方式
SSR使用看板娘时,使用自定义Document引入基础依赖
This commit is contained in:
parent
2d8e100275
commit
c41f452d5f
47
README.md
47
README.md
@ -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>
|
||||
</Head>
|
||||
</div>
|
||||
)
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
{/* <Head /> */}
|
||||
<Head>
|
||||
<script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>
|
||||
</Head>
|
||||
<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
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user