<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">Although <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="273022790" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/3265" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/3265/hovercard" href="https://github.com/vercel/next.js/issues/3265">#3265</a> raises this point too, but does not focus on it as the problem to address.</p>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">The <a href="https://github.com/zeit/next.js#customizing-webpack-config">README specifies</a></p>
<blockquote>
<p dir="auto">Warning: Adding loaders to support new file types (css, less, svg, etc.) is not recommended because only the client code gets bundled via webpack and thus it won't work on the initial server rendering</p>
</blockquote>
<p dir="auto">However many of the repo's examples rely on custom webpack configurations and loaders to produce their desired outcomes.</p>
<p dir="auto">Eg: <a href="https://github.com/zeit/next.js/tree/canary/examples/with-global-stylesheet">with-global-stylesheet</a> requires a bunch of loaders <code class="notranslate"> use: ['babel-loader', 'raw-loader', 'postcss-loader']</code> to compile and output the files into the dist dir.</p>
<p dir="auto">Then, in my journey for external global and scoped scss -&gt; css configuration/pipeline I came across <a href="https://github.com/zeit/next.js/issues/2413" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2413/hovercard">this thread</a>.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/giuseppeg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/giuseppeg">@giuseppeg</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="239663834" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2413" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2413/hovercard?comment_id=313608379&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/2413#issuecomment-313608379">#2413 (comment)</a></p>
<blockquote>
<p dir="auto">It seems that in the example webpack is doing the magic, but if it would be very cool if that works for ssr too. Have you also tried without the global property on the style tag?</p>
</blockquote>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timneutkens/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timneutkens">@timneutkens</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="239663834" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2413" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2413/hovercard?comment_id=314011709&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/2413#issuecomment-314011709">#2413 (comment)</a></p>
<blockquote>
<p dir="auto">This is really cool 😲</p>
</blockquote>
<p dir="auto">giuseppeg again - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="239663834" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2413" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2413/hovercard?comment_id=314212017&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/2413#issuecomment-314212017">#2413 (comment)</a></p>
<blockquote>
<p dir="auto">Alright <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mocheng/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mocheng">@mocheng</a> it works indeed!</p>
</blockquote>
<p dir="auto">These comments in this thread have me confused about this Webpack warning.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">Ultimately what I would like to understand is the following:</p>
<ol dir="auto">
<li>what are the implications of having Webpack configurations? Can the usage of Babel and Webpack in SSR and client-side be made more clear?</li>
<li>can we have more guidelines around the <code class="notranslate">examples</code> to make them more easily composed? Eg: <code class="notranslate">with-jest</code> does not play nice with any examples that rely on custom Webpack, specifically any styling examples.</li>
</ol>
<h1 dir="auto">Feature Request</h1>
<h2 dir="auto">The Problem</h2>
<p dir="auto">Next.js can't be used for apps running on Smart TV (e.g., on Samsung Tizen platform) or for other client-side rendered apps with dynamic data requirements.</p>
<p dir="auto">It would be great if Next.js could be used for client-side only apps and still support dynamic routing and automatic code-splitting.</p>
<h2 dir="auto">The Solution</h2>
<h3 dir="auto">SPA Mode</h3>
<p dir="auto">Next.js introduces a mode for building app as a single-page application (SPA). <code class="notranslate">getInitialProps</code> works just like before, but is executed on the client only.</p>
<p dir="auto">The new option for SPA mode is added to <em>next.config.js</em>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  …,
  spa: true
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  …<span class="pl-kos">,</span>
  <span class="pl-c1">spa</span>: <span class="pl-c1">true</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Using SPA and SSG</h3>
<p dir="auto">The open question is how to handle both SPA mode and SSG. It looks like it's still possible to do it on a per-page basis (suggested <a href="https://github.com/zeit/next.js/issues/9524" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/9524/hovercard">in this RFC</a>). Although there's no clear benefit of using a hybrid app for Smart TV use case as TV apps are hosted locally on the device.</p>
<h2 dir="auto">Considered Alternatives</h2>
<p dir="auto"><strong>Static export</strong> is not an option because the app has dynamic data requirements.</p>
<p dir="auto"><strong>SSR</strong> doesn't make sense because the app is hosted locally on the TV device. It's not a technical option either because Node.js isn't available on the TV.</p>
<p dir="auto">So, the alternative that is left is running the app <strong>without Next.js</strong>.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto"><a href="https://github.com/zeit/next.js/issues/7355" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7355/hovercard">This RFC</a> mentions the support of "client-side only applications" as one of the goals.</p>
<p dir="auto">Nuxt.js supports a <a href="https://nuxtjs.org/guide/commands#single-page-application-deployment-spa-" rel="nofollow">dedicated mode</a> for building SPA.</p>
<h3 dir="auto">Smart TV Apps 101</h3>
<p dir="auto">Smart TV apps are web apps that are executed by TV's browser engine:</p>
<ol dir="auto">
<li>The developer creates an application bundle: styles, scripts, images, <em>index.html</em>, certificates, TV config file, etc.</li>
<li>The bundle is submitted for review to TV's app store.</li>
<li>Upon successful review, the app is added to the app store and is available for download.</li>
<li>The user downloads the app.</li>
<li>The app is hosted by the TV and is run by the user.</li>
</ol>
<p dir="auto">Some Smart TV platforms like webOS TV support <a href="http://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/" rel="nofollow">hosted web apps</a>, others like Tizen prohibit such kind of apps.</p>