Emmanuel Salomon ManUtopiK

How to do HTTP/2 Server Push in Nuxt.JS App (Tested in Universal Mode & Hosted in Zeit Now)

While developing my Nuxt.js app, the one thing I tried to do most was HTTP/2 Server Push, as I am hosting my app on Zeit Now which does support both HTTP/2 and Server Push. The main reason I wanted to do it was I was using Bootstrap Vue on my project. Whcih add the Bootstrap CSS + Bootstrap Vue's own custom CSS as inline style to the document which was making the document huge. Moreover in bootstrap vue you can do bootstrapCSS: false which will not add the Bootstrap's default CSS to your page, but it will add it's own custom CSS.

Also, in my nuxt have I had a lot of CSS at the component/layout level, which are also getting added to the document as inline style. It was getting crazy. At this point I can either load the bootstrap from a CDN which costed me another external request or I can host it myself (Zeit does have CDN) on my own CDN and then do HTTP/2 server push. So, that is what I diid. I also load a style

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

	function* type (string) {
	let index = 0;

	while (index < string.length) {
	yield string.slice(0, ++index);
	}

	return string;
	}

	// Create clients outside of the handler


	// Create a client to read objects from S3
	const AWS = require('aws-sdk');
	const s3 = new AWS.S3();


	// Libraries for image resize.
	const stream = require('stream');

	import * as tap from "tap";
	import { add } from "./";

	tap.test("add", async t => {
	// arrange

	// act
	const result = add(2, 3);

	// assert

	const { ApolloServer } = require("apollo-server");
	const gql = require("graphql-tag");
	const fetch = require("node-fetch");
	const {
	introspectionQuery,
	buildClientSchema,
	printSchema
	} = require("graphql");

	const typeDefs = gql`

	--
	-- Change database owner
	--

	ALTER DATABASE "db_name" OWNER TO user;

	--
	-- List schemas
	--

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var styleEl = document.getElementById('css-layout-hack');
	if (styleEl) {
	styleEl.remove();
	return;
	}
	styleEl = document.createElement('style');
	styleEl.id = 'css-layout-hack';

	const fetch = (...args) => console.log(...args) // mock
	function httpRequest(url, method, data) {
	const init = { method }
	switch (method) {
	case 'GET':
	if (data) url = `${url}?${new URLSearchParams(data)}`
	break
	case 'POST':
	case 'PUT':
	case 'PATCH':