How to use vue-server-renderer - 10 common examples

const Koa = require('koa');
const Router = require('koa-router');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs');
const { createBundleRenderer } = require('vue-server-renderer');
const backendApp = new Koa();
const frontendApp = new Koa();
const backendRouter = new Router();
const frontendRouter = new Router();

const serverBundle = require(path.resolve(__dirname, '../dist/vue-ssr-server-bundle.json'));
const clientManifest = require(path.resolve(__dirname, '../dist/vue-ssr-client-manifest.json'));
const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.ssr.html'), 'utf-8');

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: template,
  clientManifest: clientManifest
});

// 后端Server
backendApp.use(serve(path.resolve(__dirname, '../dist')));

backendRouter.get('*', (ctx, next) => {
  console.log('ctx', ctx);
  console.log('url', ctx.url);

  let context = {
    url: ctx.url
  };

de: '13',
  en: '42',
}))

// Mock annoying components (e.g. too much vuex dependency)
jest.mock('@/authuser/components/Settings/VerificationWarning', () => ({
  render: h => h('div', 'VerificationWarning has been mocked'),
}))

const files = glob.sync('**/*.story.js', { absolute: true })
for (const f of files) {
  require(f)
}

// use server side renderer to get renderered html string
const renderer = createRenderer()

for (const group of mockStories) {
  describe('Storyshots', () => {
    describe(group.kind, () => {
      for (const story of group.stories) {
        it(story.name, async () => {
          // get the component from storybook
          const component = story.render()

          const wrapper = mount(component, {
            sync: false,
            mocks: {
              ...routerMocks,
            },
          })
          const html = await renderer.renderToString(wrapper.vm)

const fs = require('fs')
const path = require('path')
const express = require('express')
const favicon = require('serve-favicon')
const compression = require('compression')
const serialize = require('serialize-javascript')
const resolve = file => path.resolve(__dirname, file)

const isProd = process.env.NODE_ENV === 'production'
const serverInfo =
`express/${require('express/package.json').version}` +
`vue-server-renderer/${require('vue-server-renderer/package.json').version}`

const app = express()

let indexHTML  // generated by html-webpack-plugin
let renderer  // created from the webpack-generated server bundle
if(isProd){
    // in production: create server renderer and index HTML from real file
    renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8'))
    indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
    console.log("In production mode now~");
}else {
    // in development: setup the dev server with watch and hot-reload,
    // and update renderer/index HTML on file change.
    require('./build/setup-dev-server')(app, {
        bundleUpdated: bundle => {
            renderer = createRenderer(bundle)

// Step 1: Create a Vue instance!
import Vue from 'vue'
import serverRenderer from 'vue-server-renderer'

console.log(serverRenderer.default)

const app = new Vue({
  template: `<div>Hello World</div>`
})

const template = `
  
    <title>{{ title }}</title>
  
  
    
  
`

// Step 2: Create a renderer
const renderer = serverRenderer.createRenderer({

/* global context, dispatch */

import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';

app.$router.push(context.url);

app.$store.commit('setPackages', { packages: context.packages });

renderVueComponentToString(app, (err, html) => {
    if (err) {
        throw new Error(err);
    }
    dispatch(html);
});

function createRenderer (bundle, options) {
  // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
  return createBundleRenderer(bundle, Object.assign(options, {
    cache: LRU({
      max: 1000,
      maxAge: 1000 * 60 * 15
    }),
    // this is only needed when vue-server-renderer is npm-linked
    basedir: resolve('../dist'),
    // recommended for performance
    runInNewContext: false
  }))
}

function createRenderer (bundle, options) {
  return createBundleRenderer(bundle, Object.assign(options, {
    template,
    runInNewContext: false,
    // cache: LRU({
    //   max: 10000,
    //   maxAge: ...
    // })//启用组件缓存
  }))
}
if (isProd) {

function createRenderer(bundle, options) {
    // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
    return createBundleRenderer(bundle, Object.assign(options, {
        // for component caching
        cache: LRU({
            max: 1000,
            maxAge: 1000 * 60 * 15
        }),
        // this is only needed when vue-server-renderer is npm-linked
        basedir: resolve('./dist'),
        // recommended for performance
        runInNewContext: false
    }))
}

function createRenderer (bundle, template) {
  // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
  return require('vue-server-renderer').createBundleRenderer(bundle, {
    template,
    cache: require('lru-cache')({
      max: 1000,
      maxAge: 1000 * 60 * 15
    })
  })
}

function createRenderer (bundle, options) {
      // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
      return createBundleRenderer(bundle, Object.assign(options, {
        // for component caching
        cache: LRU({
          max: 1000,
          maxAge: 1000 * 60 * 15
        }),
        // recommended for performance
        runInNewContext: false
      }))
    }