<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and I believe this is not a duplicate</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Adding Script tags got the Google Custom Search in HTML section with JSX should be supported or provide alternative ways</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Throws the following error<br>
app/pages/index.js?entry: name.charAt is not a function</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Add the following code in HTML section of JSX page inside a DIV.</p>
<p dir="auto"><code class="notranslate">&lt;script&gt; (function() { var cx = '0089289843748653:ikyblft4'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); &lt;/script&gt; &lt;gcse:search&gt;&lt;/gcse:search&gt;:search&gt;&lt;/gcse:search&gt;</code></p>
<p dir="auto">I also tried with following but didn't work</p>
<p dir="auto"><code class="notranslate">App.componentDidMount = () =&gt; { var embedcode = </code>&lt;script&gt;<br>
(function() {<br>
var cx = '013626029654558379071:ze3tw4csia4';<br>
var gcse = document.createElement('script');<br>
gcse.type = 'text/javascript';<br>
gcse.async = true;<br>
gcse.src = '<a href="https://cse.google.com/cse.js?cx=" rel="nofollow">https://cse.google.com/cse.js?cx=</a>' + cx;<br>
var s = document.getElementsByTagName('script')[0];<br>
s.parentNode.insertBefore(gcse, s);<br>
})();<br>
&lt;/script&gt;<br>
gcse:search&lt;/gcse:search&gt;`</p>
<p dir="auto">$('#gsearch').html(embedcode)<br>
}`</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Trying to add Google Custom Search to my site created in NextJS</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>react</td>
<td>16.2.0</td>
</tr>
<tr>
<td>OS</td>
<td>Mac</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>node</td>
<td>latest</td>
</tr>
</tbody>
</table>
<p dir="auto">I think a client-side <code class="notranslate">pushState</code> should be performed BEFORE <code class="notranslate">getInitialProps</code>.</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">Expected Behavior</h2>


<p dir="auto">I think the correct way is to perform <code class="notranslate">pushState</code> first, leaving the unfetched data as default value, so that we can render the static part of the page, and dynamic part of the page will be blank or filled with loading spinners, just like what we do in writing a totally client-side-rendered project. After this, data fetching will be performed and dynamic data will be fed to the page asynchronously.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Currently, in a client-side routing, <code class="notranslate">pushState</code> will be performed after the execution of <code class="notranslate">getInitialProps</code> of the destination page. So if the async data fetching in <code class="notranslate">getInitialProps</code> takes 5 seconds, the client-side will do nothing during the 5 seconds, leading to a bad user experience.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">This issue leads to a delay when I click any <code class="notranslate">&lt;Link&gt;</code> in client-side.</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.9.1</td>
</tr>
</tbody>
</table>