<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">Expected Behavior</h2>
<p dir="auto">Let users dynamically import higher order components in the same manner as regular components to increase composability.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Using <code class="notranslate">dynamic(import('./file.js'))</code> returns a DynamicComponent and can't be used to load HoCs, which makes sense because HoCs are functions and not components.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">When using next to render the same modular frontend for different clients, we use <code class="notranslate">getInitialProps</code> to fetch the client data and then wanted to apply HoCs (derived from the client settings) for customization.</p>
<p dir="auto">Example:<br>
hoc_1.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default Content =&gt; {
  return props =&gt; (
    &lt;section className=&quot;Module&quot; alt={props.alt}&gt;
      &lt;h2&gt;{props.title}&lt;/h2&gt;
      &lt;Content {...props} /&gt;
    &lt;/section&gt;
  );
};"><pre class="notranslate"><code class="notranslate">export default Content =&gt; {
  return props =&gt; (
    &lt;section className="Module" alt={props.alt}&gt;
      &lt;h2&gt;{props.title}&lt;/h2&gt;
      &lt;Content {...props} /&gt;
    &lt;/section&gt;
  );
};
</code></pre></div>
<p dir="auto">hoc_2.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default Content =&gt; {
  return class Module extends React.Component{
    componentDidMount(){
      //do some module specific stuff
    }
    render(){
      return (
        &lt;section className=&quot;Module&quot; alt={props.alt}&gt;
          &lt;div className=&quot;SubModule&quot;&gt;
              &lt;Content {...props} /&gt;
          &lt;/div&gt;
          &lt;div&gt;Some other Stuff&lt;/div&gt;
        &lt;/section&gt;
      )
    }
  }
};"><pre class="notranslate"><code class="notranslate">export default Content =&gt; {
  return class Module extends React.Component{
    componentDidMount(){
      //do some module specific stuff
    }
    render(){
      return (
        &lt;section className="Module" alt={props.alt}&gt;
          &lt;div className="SubModule"&gt;
              &lt;Content {...props} /&gt;
          &lt;/div&gt;
          &lt;div&gt;Some other Stuff&lt;/div&gt;
        &lt;/section&gt;
      )
    }
  }
};
</code></pre></div>
<p dir="auto">index.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Modules from &quot;../components/Modules.js&quot;; // all modules dynamically imported and exported as Object
import HOCs from &quot;../components/HOCs.js&quot;; // all HOCs dynamically imported and exported as Object

export default class Index extends Component {
  static async getInitialProps({ req }) {
    const res = await fetch(`/client_settings_api/`);
    const json = await res.json();
    return { modules: json.modules, contentHoC: json.contentHoC };
  }

  render() {
    return (
      &lt;div&gt;
        {this.props.modules.map(module =&gt; {
          const Module = Modules[module.type];
          const contentHoC = HOCs[this.props.contentHoC];
          const EnhancedComponent = contentHoC(Module);
          return &lt;EnhancedComponent /&gt;;
        })}
      &lt;/div&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import Modules from "../components/Modules.js"; // all modules dynamically imported and exported as Object
import HOCs from "../components/HOCs.js"; // all HOCs dynamically imported and exported as Object

export default class Index extends Component {
  static async getInitialProps({ req }) {
    const res = await fetch(`/client_settings_api/`);
    const json = await res.json();
    return { modules: json.modules, contentHoC: json.contentHoC };
  }

  render() {
    return (
      &lt;div&gt;
        {this.props.modules.map(module =&gt; {
          const Module = Modules[module.type];
          const contentHoC = HOCs[this.props.contentHoC];
          const EnhancedComponent = contentHoC(Module);
          return &lt;EnhancedComponent /&gt;;
        })}
      &lt;/div&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">In this particular case you could simply render <code class="notranslate">this.props.children</code>in the HoC, use it as a dynamic component and render <code class="notranslate">&lt;Hoc {...props} /&gt;&lt;Module {...props} /&gt;&lt;/Hoc&gt;</code> but this raises the question how to use HoCs dynamically in general? Instead of exporting components already wrapped in HoCs maybe it's possible to use HoCs dynamically to compose them where and how you like?</p>
<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>4.2.1</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
</tbody>
</table>
<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>
<p dir="auto">After transiting from one page to another page via next <code class="notranslate">&lt;Link /&gt;</code>, if user clicks the back button and the previous page has <code class="notranslate">getInitialProps</code> method that takes some time to finish, the scroll position of the previous will be restored before the previous pages gets rendered.</p>
<h2 dir="auto">Demo</h2>
<p dir="auto">source code can be found <a href="https://github.com/liweinan0423/nextjs-scroll-restoration-issue">here</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/646159/32951715-ed75a7e6-cbe5-11e7-9d08-a9747a48329d.gif"><img src="https://user-images.githubusercontent.com/646159/32951715-ed75a7e6-cbe5-11e7-9d08-a9747a48329d.gif" alt="out" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">After clicking back button, the "go back" text should still be visible (not scroll down to previous position) until the previous page gets rendered</p>