2019-07-30 20:00:19 +02:00
|
|
|
import React from 'react'
|
|
|
|
import Link from 'next/link'
|
|
|
|
import { render } from 'react-dom'
|
2019-08-22 22:19:15 +02:00
|
|
|
import App, { AppContext } from 'next/app'
|
2019-07-30 20:00:19 +02:00
|
|
|
import { renderToString } from 'react-dom/server'
|
|
|
|
|
2019-08-13 22:15:44 +02:00
|
|
|
class MyApp<P = {}> extends App<P & { html: string }> {
|
2019-09-09 18:23:34 +02:00
|
|
|
static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
|
2019-07-30 20:00:19 +02:00
|
|
|
let pageProps = {}
|
|
|
|
|
|
|
|
if (Component.getInitialProps) {
|
|
|
|
pageProps = await Component.getInitialProps(ctx)
|
|
|
|
}
|
|
|
|
|
2019-09-09 18:23:34 +02:00
|
|
|
let html: string
|
|
|
|
const toRender = <AppTree pageProps={pageProps} another="prop" />
|
2019-07-30 20:00:19 +02:00
|
|
|
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
const el = document.createElement('div')
|
|
|
|
document.querySelector('body').appendChild(el)
|
|
|
|
render(toRender, el)
|
|
|
|
html = el.innerHTML
|
|
|
|
el.remove()
|
|
|
|
} else {
|
|
|
|
html = renderToString(toRender)
|
|
|
|
}
|
|
|
|
|
|
|
|
return { pageProps, html }
|
|
|
|
}
|
|
|
|
|
2019-08-13 22:15:44 +02:00
|
|
|
render() {
|
2019-07-30 20:00:19 +02:00
|
|
|
const { Component, pageProps, html, router } = this.props
|
|
|
|
const href = router.pathname === '/' ? '/another' : '/'
|
|
|
|
|
2019-08-13 11:33:48 +02:00
|
|
|
return html && router.pathname !== '/hello' ? (
|
2019-07-30 20:00:19 +02:00
|
|
|
<>
|
|
|
|
<div dangerouslySetInnerHTML={{ __html: html }} />
|
|
|
|
<Link href={href}>
|
|
|
|
<a id={href === '/' ? 'home' : 'another'}>to {href}</a>
|
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
) : (
|
2019-08-22 22:19:15 +02:00
|
|
|
<Component {...pageProps} />
|
2019-07-30 20:00:19 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default MyApp
|