Menu
Exploring NextJS a bit for its server side rendering features. It looks really nice and easy to use. I already explored the _document.js file which we can include to overwrite the default. I found the following code in an example:
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Now I get it that we are overwriting the current HTML template. But I'm a bit confused regarding the functionality of the Main and Nextscript.
Is Main just a page? What is Nextscript (which script)?
734
The default NextScript implementation captures the scripts generated by the Next build process and immediately renders them to <script> tags in its render() function.
NextJS by default is not SPA based due to its hybrid nature, because it publishes each page as a separate entry point for everything under /pages . Of course if you only have one page index. js , then technically it's a SPA again.
The sole purpose of Next is to use SSR, if you don't want it, just drop it entirely and use normal react alone. Next. js pre-renders every page, either at build time when using SSG, or at request time when using SSR. You can't have client-side rendering only, you have to have it along with SSG or SSR.
The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application. A React component called Link is provided to do this client-side route transition.
NextScript Class is here
and Main Class is here and I copied the same below. Main renders html/ errorHtml from this.context._documentProps
export class Main extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { html, errorHtml } = this.context._documentProps
return (
<Fragment>
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
<div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
</Fragment>
)
}
}
you can find actual documentation on Custom Document here
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
