Simplify with-noscript example (#9094)
## Changelog - Removed react-lazyload - Removed images - Removed ReactDOMServer from Client - Removed next.config.js ## Notes **CommonJS vs ESM:** In the future we might be able to use top level `await` in order to import only on the server (e.g.: `await import(“react-dom/server”)`) Until then we need to mix CommonJS and ESM in favor of messing with the webpack config.
This commit is contained in:
parent
beed775e55
commit
02e75cfdd1
8 changed files with 22 additions and 47 deletions
|
@ -1,7 +1,15 @@
|
|||
import React from 'react'
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
|
||||
export default function Noscript (props) {
|
||||
const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children)
|
||||
// We don't want to send 'react-dom/server' to the client
|
||||
let ReactDOMServer
|
||||
if (typeof window === 'undefined') {
|
||||
ReactDOMServer = require('react-dom/server')
|
||||
}
|
||||
|
||||
export default function Noscript ({ children }) {
|
||||
if (!ReactDOMServer) {
|
||||
return null
|
||||
}
|
||||
const staticMarkup = ReactDOMServer.renderToStaticMarkup(children)
|
||||
return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
|
||||
}
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
module.exports = {
|
||||
webpack: (config, { dev }) => {
|
||||
if (!dev) {
|
||||
config.resolve.alias = {
|
||||
'react-dom/server': require.resolve(
|
||||
'react-dom/umd/react-dom-server.browser.production.min.js'
|
||||
)
|
||||
}
|
||||
}
|
||||
return config
|
||||
}
|
||||
}
|
|
@ -9,8 +9,7 @@
|
|||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-lazyload": "^2.2.7"
|
||||
"react-dom": "^16.7.0"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
@ -1,35 +1,15 @@
|
|||
import React from 'react'
|
||||
import LazyLoad from 'react-lazyload'
|
||||
import Noscript from '../components/Noscript'
|
||||
|
||||
const images = [
|
||||
'/static/img/reactjs.png',
|
||||
'/static/img/nextjs.png',
|
||||
'/static/img/vuejs.png',
|
||||
'/static/img/angular.jpg'
|
||||
]
|
||||
export default function IndexPage () {
|
||||
return (
|
||||
<>
|
||||
<h1>noscript</h1>
|
||||
<p>Disable JavaScript to see it in action:</p>
|
||||
|
||||
class Index extends React.Component {
|
||||
static getInitialProps (context) {
|
||||
const { isServer } = context
|
||||
return { isServer }
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
{images.map((item, index) => (
|
||||
<div key={index}>
|
||||
<LazyLoad height={700} offset={100}>
|
||||
<img width={700} height={700} src={item} alt={`image_${index}`} />
|
||||
</LazyLoad>
|
||||
<Noscript>
|
||||
<img width={700} height={700} src={item} alt={`image_${index}`} />
|
||||
</Noscript>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<hr />
|
||||
|
||||
<Noscript>Noscript is enabled!</Noscript>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 7 KiB |
Binary file not shown.
Before Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
Before Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in a new issue