1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Make sure the router is aware of the nextExport

Based on the we can change the routing to do SSR always.
Also make sure pageLoader don't download the page via
client side twice.
This commit is contained in:
Arunoda Susiripala 2017-05-08 18:20:50 -07:00
parent d4aa2b0408
commit 311e4ca0ee
6 changed files with 58 additions and 15 deletions

View file

@ -1,3 +1,5 @@
/* global __NEXT_DATA__ */
import { resolve, format, parse } from 'url'
import React, { Component, Children } from 'react'
import PropTypes from 'prop-types'
@ -38,6 +40,10 @@ export default class Link extends Component {
return
}
if (__NEXT_DATA__.nextExport) {
return
}
let { href, as } = this
if (!isLocal(href)) {
@ -73,6 +79,7 @@ export default class Link extends Component {
}
prefetch () {
if (__NEXT_DATA__.nextExport) return
if (!this.props.prefetch) return
if (typeof window === 'undefined') return
@ -122,6 +129,16 @@ export default class Link extends Component {
props.href = as || href
}
// Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly.
const endsWithSlash = /\/$/.test(props.href)
if (
__NEXT_DATA__.nextExport &&
!endsWithSlash
) {
props.href = `${props.href}/`
}
return React.cloneElement(child, props)
}
}

View file

@ -47,6 +47,12 @@ export default class PageLoader {
this.registerEvents.on(route, fire)
// If the page is loading via SSR, we need to wait for it
// rather downloading it again.
if (document.getElementById(`__NEXT_PAGE__${route}`)) {
return
}
// Load the script if not asked to load yet.
if (!this.loadingRoutes[route]) {
this.loadScript(route)

View file

@ -1,3 +1,4 @@
/* global __NEXT_DATA__ */
import { parse, format } from 'url'
import mitt from 'mitt'
import shallowEquals from '../shallow-equals'
@ -120,6 +121,16 @@ export default class Router {
const url = typeof _url === 'object' ? format(_url) : _url
const as = typeof _as === 'object' ? format(_as) : _as
// We need to load the page via SSR everytime if we
// are in the nextExport mode.
if (__NEXT_DATA__.nextExport) {
// Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly.
const endsWithSlash = /\/$/.test(as)
window.location.href = endsWithSlash ? as : `${as}/`
return
}
this.abortComponentLoad(as)
const { pathname, query } = parse(url, true)
@ -267,6 +278,7 @@ export default class Router {
}
async prefetch (url) {
if (__NEXT_DATA__.nextExport) return
// We don't add support for prefetch in the development mode.
// If we do that, our on-demand-entries optimization won't performs better
if (process.env.NODE_ENV === 'development') return

View file

@ -133,7 +133,7 @@ export class NextScript extends Component {
render () {
const { staticMarkup, __NEXT_DATA__ } = this.context._documentProps
const { realPathname, buildId, assetPrefix } = __NEXT_DATA__
const { pathname, realPathname, buildId, assetPrefix } = __NEXT_DATA__
return <div>
{staticMarkup ? null : <script dangerouslySetInnerHTML={{
@ -147,8 +147,8 @@ export class NextScript extends Component {
}
`
}} />}
<script async type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${realPathname}`} />
<script async type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error.js`} />
<script async id={`__NEXT_PAGE__${pathname}`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${realPathname}`} />
<script async id={`__NEXT_PAGE__/_error`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error.js`} />
{staticMarkup ? null : this.getScripts()}
</div>
}

View file

@ -37,17 +37,6 @@ export default async function (dir) {
join(outDir, '_next', buildId, 'page')
)
// Start the rendering process
const renderOpts = {
dir,
buildStats,
buildId,
assetPrefix: config.assetPrefix.replace(/\/$/, ''),
dev: false,
staticMarkup: false,
hotReloader: null
}
// Get the exportPathMap from the `next.config.js`
if (typeof config.exportPathMap !== 'function') {
printAndExit(
@ -59,6 +48,23 @@ export default async function (dir) {
const exportPathMap = await config.exportPathMap()
const exportPaths = Object.keys(exportPathMap)
// Start the rendering process
const renderOpts = {
dir,
buildStats,
buildId,
nextExport: true,
assetPrefix: config.assetPrefix.replace(/\/$/, ''),
dev: false,
staticMarkup: false,
hotReloader: null
}
// We need this for server rendering the Link component.
global.__NEXT_DATA__ = {
nextExport: true
}
for (const path of exportPaths) {
const { page, query } = exportPathMap[path]
const req = { url: path }

View file

@ -40,7 +40,8 @@ async function doRender (req, res, pathname, query, {
assetPrefix,
dir = process.cwd(),
dev = false,
staticMarkup = false
staticMarkup = false,
nextExport = false
} = {}) {
page = page || pathname
@ -106,6 +107,7 @@ async function doRender (req, res, pathname, query, {
buildId,
buildStats,
assetPrefix,
nextExport,
err: (err) ? serializeError(dev, err) : null
},
dev,