<h2 dir="auto">Problem</h2>
<p dir="auto">I am trying to implement h2 server push in my custom express server, but not able to figure out how exactly the path of bundled assets inside .next directory gets resolved on runtime.</p>
<h2 dir="auto">Code</h2>
<p dir="auto">Currently, this is my server.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const express = require('express');
const compression = require('compression');
const next = require('next');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const cmdArgs = process.argv.slice(2);
const portNumber = parseInt(cmdArgs[0], 10);

app.prepare()
.then(() =&gt; {
  const server = express();
  server.use(compression());
  server.get('/sw.js', (req, res) =&gt; app.serveStatic(req, res, path.resolve('./.next/sw.js')));
  server.get('*', (req, res) =&gt; handle(req, res));
  server.listen(portNumber, (err) =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on https://localhost:${portNumber}`);
  });
});"><pre class="notranslate"><code class="notranslate">const express = require('express');
const compression = require('compression');
const next = require('next');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const cmdArgs = process.argv.slice(2);
const portNumber = parseInt(cmdArgs[0], 10);

app.prepare()
.then(() =&gt; {
  const server = express();
  server.use(compression());
  server.get('/sw.js', (req, res) =&gt; app.serveStatic(req, res, path.resolve('./.next/sw.js')));
  server.get('*', (req, res) =&gt; handle(req, res));
  server.listen(portNumber, (err) =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on https://localhost:${portNumber}`);
  });
});
</code></pre></div>
<p dir="auto">Basically I want to send my app.js bundle as soon as a hit is made on the root route.<br>
So I am trying to achieve something like the code below by following this <a href="https://deanhume.com/home/blogpost/getting-started-with-http-2-and-server-push/10152" rel="nofollow">article</a>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="....
....
app.prepare()
.then(() =&gt; {
  const server = express();
  server.use(compression());
  server.get('/sw.js', (req, res) =&gt; app.serveStatic(req, res, path.resolve('./.next/sw.js')));
  server.get('/', (req, res) =&gt; {
    Promise.all([
      fs.readFile(// path to index.html)),
      fs.readFile(// path to app.js bundle),
    ]).then(files =&gt; {

      if (res.push){
          // The JS file
          var squareRootStream = res.push(// path to app.js bundle, {
              req: {'accept': '**/*'},
              res: {'content-type': 'application/javascript'}
          });

          squareRootStream.on('error', err =&gt; {
            console.log(err);
          });

          squareRootStream.end(files[1]);
      }

      res.writeHead(200);
      res.end(files[0]);
    }).catch(error =&gt; res.status(500).send(error.toString()));
  });
  });
  server.get('*', (req, res) =&gt; handle(req, res));
});
....
...."><pre class="notranslate"><code class="notranslate">....
....
app.prepare()
.then(() =&gt; {
  const server = express();
  server.use(compression());
  server.get('/sw.js', (req, res) =&gt; app.serveStatic(req, res, path.resolve('./.next/sw.js')));
  server.get('/', (req, res) =&gt; {
    Promise.all([
      fs.readFile(// path to index.html)),
      fs.readFile(// path to app.js bundle),
    ]).then(files =&gt; {

      if (res.push){
          // The JS file
          var squareRootStream = res.push(// path to app.js bundle, {
              req: {'accept': '**/*'},
              res: {'content-type': 'application/javascript'}
          });

          squareRootStream.on('error', err =&gt; {
            console.log(err);
          });

          squareRootStream.end(files[1]);
      }

      res.writeHead(200);
      res.end(files[0]);
    }).catch(error =&gt; res.status(500).send(error.toString()));
  });
  });
  server.get('*', (req, res) =&gt; handle(req, res));
});
....
....
</code></pre></div>
<p dir="auto">Is it possible to implement something like this in next.js ?<br>
Any advice/help would be greatly appreciated..!!</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>^3.0.1-beta.16</td>
</tr>
<tr>
<td>node</td>
<td>v6.8.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome Version 60.0.3112.113 (Official Build) (64-bit)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">It is known that runtime config is not supported in static-optimized pages.<br>
However, <a href="https://github.com/MrOrz/nextjs-runtime-config-bug">this repo</a> demonstrates that even when runtime config is used only in <em>server-rendered pages</em>, the runtime config can <strong>still be missing</strong>, which is not expected.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have constructed a minimal demo app for the bug: <a href="https://github.com/MrOrz/nextjs-runtime-config-bug">https://github.com/MrOrz/nextjs-runtime-config-bug</a></p>
<p dir="auto">This demo consists of 2 pages:</p>
<ul dir="auto">
<li><code class="notranslate">pages/index.js</code> - A landing page that contains a link to data page. The page is meant to be static-optimized.</li>
<li><code class="notranslate">pages/data.js</code> - The data page that depends on <code class="notranslate">API_URL</code> in public runtime config (Actually it prints <code class="notranslate">publicRuntimeConfig.API_URL</code> directly). This page is meant to be server-rendered.</li>
</ul>
<p dir="auto">Reproduction steps are:</p>
<ol dir="auto">
<li>Clone this repository &amp; <code class="notranslate">yarn</code></li>
<li><code class="notranslate">yarn build</code></li>
<li><code class="notranslate">API_URL=https://my.api yarn start</code> and visit <code class="notranslate">http://localhost:3000</code></li>
<li>Click "Data page" link on <code class="notranslate">http://localhost:3000</code>. Browser will navigate to <code class="notranslate">http://localhost:3000/data</code> without full reload.</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The <code class="notranslate">/data</code> page shows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="We show data from API URL: https://my.api"><pre class="notranslate"><code class="notranslate">We show data from API URL: https://my.api
</code></pre></div>
<h2 dir="auto">Actual behavior</h2>
<p dir="auto">The <code class="notranslate">/data</code> page shows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="We show data from API URL:"><pre class="notranslate"><code class="notranslate">We show data from API URL:
</code></pre></div>
<p dir="auto">Runtime config "API_URL" in server-rendered page does not present.</p>
<p dir="auto">However, if we visit <code class="notranslate">http://localhost:3000/data</code> directly, we can see the API URL again.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/108608/68006516-bfe03c00-fcb3-11e9-90ae-7c94fcabeec0.gif"><img src="https://user-images.githubusercontent.com/108608/68006516-bfe03c00-fcb3-11e9-90ae-7c94fcabeec0.gif" alt="scenario" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser (if applies) Google Chrome</li>
<li><code class="notranslate">next</code>: 9.1.2</li>
<li><code class="notranslate">react</code>: 16.11.0</li>
<li><code class="notranslate">react-dom</code>: 16.11.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto"><a href="https://github.com/MrOrz/nextjs-runtime-config-bug">The scenario</a> is the simplified from <a href="https://github.com/cofacts/rumors-site/tree/dev">this website</a>. I want to have a <a href="http://en.cofacts.hacktabl.org/" rel="nofollow">statically rendered landing page</a> linking to a <a href="http://en.cofacts.hacktabl.org/articles" rel="nofollow">server-rendered article list</a>; however, when users go to article list from the landing page, the HTTP requests always fail because API URL in config is not set.</p>
<p dir="auto">When I deploy the website, I put the built website in <a href="https://github.com/cofacts/rumors-site/blob/build/Dockerfile">Docker image</a>. Production sites and staging sites will share the same docker image to ensure consistency between the two environments; the only difference between them are the API endpoints they connect to, which is <a href="https://github.com/cofacts/rumors-deploy/blob/master/docker-compose.production.yml#L38">specified in docker-compose file</a>. This is why I put API URL in <code class="notranslate">publicRuntimeConfig</code> instead of build-time config.</p>