mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 22:25:12 +00:00
220 lines
7.8 KiB
JavaScript
220 lines
7.8 KiB
JavaScript
import ansiHTML from 'ansi-html'
|
|
import serialize from 'serialize-javascript'
|
|
import generateETag from 'etag'
|
|
import fresh from 'fresh'
|
|
import Tapable from 'tappable'
|
|
import pify from 'pify'
|
|
import serveStatic from 'serve-static'
|
|
import compression from 'compression'
|
|
import _ from 'lodash'
|
|
import { resolve } from 'path'
|
|
import {readFileSync} from 'fs'
|
|
import { getContext, setAnsiColors, encodeHtml } from './utils'
|
|
|
|
const debug = require('debug')('nuxt:render')
|
|
debug.color = 4 // Force blue color
|
|
setAnsiColors(ansiHTML)
|
|
|
|
let jsdom = null
|
|
|
|
export default class Renderer extends Tapable {
|
|
constructor (nuxt) {
|
|
super()
|
|
this.nuxt = nuxt
|
|
this.options = nuxt.options
|
|
|
|
this.nuxt.plugin('init', () => {
|
|
// For serving static/ files to /
|
|
this.serveStatic = pify(serveStatic(resolve(this.options.srcDir, 'static'), this.options.render.static))
|
|
|
|
// For serving .nuxt/dist/ files (only when build.publicPath is not an URL)
|
|
this.serveStaticNuxt = pify(serveStatic(resolve(this.options.buildDir, 'dist'), {
|
|
maxAge: (this.options.dev ? 0 : '1y') // 1 year in production
|
|
}))
|
|
|
|
// gzip middleware for production
|
|
if (!this.options.dev && this.options.render.gzip) {
|
|
this.gzipMiddleware = pify(compression(this.options.render.gzip))
|
|
}
|
|
|
|
// Error template
|
|
this.errorTemplate = _.template(readFileSync(resolve(__dirname, 'views', 'error.html'), 'utf8'), {
|
|
interpolate: /{{([\s\S]+?)}}/g
|
|
})
|
|
})
|
|
}
|
|
|
|
async render (req, res) {
|
|
/* istanbul ignore if */
|
|
if (!this.nuxt.builder.renderer || !this.nuxt.builder.appTemplate) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve(this.render(req, res))
|
|
}, 1000)
|
|
})
|
|
}
|
|
// Get context
|
|
const context = getContext(req, res)
|
|
res.statusCode = 200
|
|
try {
|
|
if (this.options.dev) {
|
|
// Call webpack middleware only in development
|
|
await this.nuxt.builder.webpackDevMiddleware(req, res)
|
|
await this.nuxt.builder.webpackHotMiddleware(req, res)
|
|
}
|
|
if (!this.options.dev && this.options.render.gzip) {
|
|
await this.nuxt.gzipMiddleware(req, res)
|
|
}
|
|
// If base in req.url, remove it for the middleware and vue-router
|
|
if (this.options.router.base !== '/' && req.url.indexOf(this.options.router.base) === 0) {
|
|
// Compatibility with base url for dev server
|
|
req.url = req.url.replace(this.options.router.base, '/')
|
|
}
|
|
// Serve static/ files
|
|
await this.nuxt.serveStatic(req, res)
|
|
// Serve .nuxt/dist/ files (only for production)
|
|
if (!this.options.dev && req.url.indexOf(this.options.build.publicPath) === 0) {
|
|
const url = req.url
|
|
req.url = req.url.replace(this.options.build.publicPath, '/')
|
|
await this.nuxt.serveStaticNuxt(req, res)
|
|
/* istanbul ignore next */
|
|
req.url = url
|
|
}
|
|
if (this.options.dev && req.url.indexOf(this.options.build.publicPath) === 0 && req.url.includes('.hot-update.json')) {
|
|
res.statusCode = 404
|
|
return res.end()
|
|
}
|
|
const { html, error, redirected, resourceHints } = await this.renderRoute(req.url, context)
|
|
if (redirected) {
|
|
return html
|
|
}
|
|
if (error) {
|
|
res.statusCode = context.nuxt.error.statusCode || 500
|
|
}
|
|
// ETag header
|
|
if (!error && this.options.render.etag) {
|
|
const etag = generateETag(html, this.options.render.etag)
|
|
if (fresh(req.headers, { etag })) {
|
|
res.statusCode = 304
|
|
res.end()
|
|
return
|
|
}
|
|
res.setHeader('ETag', etag)
|
|
}
|
|
// HTTP2 push headers
|
|
if (!error && this.options.render.http2.push) {
|
|
// Parse resourceHints to extract HTTP.2 prefetch/push headers
|
|
// https://w3c.github.io/preload/#server-push-http-2
|
|
const regex = /link rel="([^"]*)" href="([^"]*)" as="([^"]*)"/g
|
|
const pushAssets = []
|
|
let m
|
|
while (m = regex.exec(resourceHints)) { // eslint-disable-line no-cond-assign
|
|
const [_, rel, href, as] = m // eslint-disable-line no-unused-vars
|
|
if (rel === 'preload') {
|
|
pushAssets.push(`<${href}>; rel=${rel}; as=${as}`)
|
|
}
|
|
}
|
|
// Pass with single Link header
|
|
// https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header
|
|
res.setHeader('Link', pushAssets.join(','))
|
|
}
|
|
res.setHeader('Content-Type', 'text/html; charset=utf-8')
|
|
res.setHeader('Content-Length', Buffer.byteLength(html))
|
|
res.end(html, 'utf8')
|
|
return html
|
|
} catch (err) {
|
|
if (context.redirected) {
|
|
console.error(err) // eslint-disable-line no-console
|
|
return err
|
|
}
|
|
const html = this.nuxt.errorTemplate({
|
|
/* istanbul ignore if */
|
|
error: err,
|
|
stack: ansiHTML(encodeHtml(err.stack))
|
|
})
|
|
res.statusCode = 500
|
|
res.setHeader('Content-Type', 'text/html; charset=utf-8')
|
|
res.setHeader('Content-Length', Buffer.byteLength(html))
|
|
res.end(html, 'utf8')
|
|
return err
|
|
}
|
|
}
|
|
|
|
async renderRoute (url, context = {}) {
|
|
// Log rendered url
|
|
debug(`Rendering url ${url}`)
|
|
// Add url and isSever to the context
|
|
context.url = url
|
|
context.isServer = true
|
|
// Call renderToString from the bundleRenderer and generate the HTML (will update the context as well)
|
|
let APP = await this.nuxt.builder.renderToString(context)
|
|
if (!context.nuxt.serverRendered) {
|
|
APP = '<div id="__nuxt"></div>'
|
|
}
|
|
const m = context.meta.inject()
|
|
let HEAD = m.meta.text() + m.title.text() + m.link.text() + m.style.text() + m.script.text() + m.noscript.text()
|
|
if (this._routerBaseSpecified) {
|
|
HEAD += `<base href="${this.options.router.base}">`
|
|
}
|
|
const resourceHints = context.renderResourceHints()
|
|
HEAD += resourceHints + context.renderStyles()
|
|
APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })}</script>`
|
|
APP += context.renderScripts()
|
|
const html = this.nuxt.builder.appTemplate({
|
|
HTML_ATTRS: 'data-n-head-ssr ' + m.htmlAttrs.text(),
|
|
BODY_ATTRS: m.bodyAttrs.text(),
|
|
HEAD,
|
|
APP
|
|
})
|
|
return {
|
|
html,
|
|
resourceHints,
|
|
error: context.nuxt.error,
|
|
redirected: context.redirected
|
|
}
|
|
}
|
|
|
|
async renderAndGetWindow (url, opts = {}) {
|
|
/* istanbul ignore if */
|
|
if (!jsdom) {
|
|
try {
|
|
jsdom = require('jsdom')
|
|
} catch (e) {
|
|
console.error('Fail when calling nuxt.renderAndGetWindow(url)') // eslint-disable-line no-console
|
|
console.error('jsdom module is not installed') // eslint-disable-line no-console
|
|
console.error('Please install jsdom with: npm install --save-dev jsdom') // eslint-disable-line no-console
|
|
process.exit(1)
|
|
}
|
|
}
|
|
let options = {
|
|
resources: 'usable', // load subresources (https://github.com/tmpvar/jsdom#loading-subresources)
|
|
runScripts: 'dangerously',
|
|
beforeParse (window) {
|
|
// Mock window.scrollTo
|
|
window.scrollTo = () => {
|
|
}
|
|
}
|
|
}
|
|
if (opts.virtualConsole !== false) {
|
|
options.virtualConsole = new jsdom.VirtualConsole().sendTo(console)
|
|
}
|
|
url = url || 'http://localhost:3000'
|
|
const { window } = await jsdom.JSDOM.fromURL(url, options)
|
|
// If Nuxt could not be loaded (error from the server-side)
|
|
const nuxtExists = window.document.body.innerHTML.includes('window.__NUXT__')
|
|
if (!nuxtExists) {
|
|
/* istanbul ignore next */
|
|
let error = new Error('Could not load the nuxt app')
|
|
/* istanbul ignore next */
|
|
error.body = window.document.body.innerHTML
|
|
throw error
|
|
}
|
|
// Used by nuxt.js to say when the components are loaded and the app ready
|
|
await new Promise((resolve) => {
|
|
window._onNuxtLoaded = () => resolve(window)
|
|
})
|
|
// Send back window object
|
|
return window
|
|
}
|
|
}
|