<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: kon</title>
    <description>The latest articles on DEV Community by kon (@kon).</description>
    <link>https://dev.to/kon</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2999634%2F217261f7-8df3-407d-8166-0123a5df3798.png</url>
      <title>DEV Community: kon</title>
      <link>https://dev.to/kon</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kon"/>
    <language>en</language>
    <item>
      <title>Achieve super fast load time with any framework</title>
      <dc:creator>kon</dc:creator>
      <pubDate>Mon, 31 Mar 2025 22:16:54 +0000</pubDate>
      <link>https://dev.to/kon/achieve-super-fast-load-time-for-any-framework-fd5</link>
      <guid>https://dev.to/kon/achieve-super-fast-load-time-for-any-framework-fd5</guid>
      <description>&lt;p&gt;CDN, thats all you need, no ssr, no streaming, just plain old cdn. Here's an app I made using this method: &lt;a href="https://kon.chat" rel="noopener noreferrer"&gt;kon.chat&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ill teach you how to make a fast loading web app, no more delays due to cold starts, cheap cost as you are only paying for the network traffic, in any framework.&lt;/p&gt;

&lt;p&gt;The secret is to build it into an spa, no kidding, its that simple. Especially when combined with caching you can get super fast load time with relatively cheap cost. Frameworks like next and sveltekit allows you to build your app into spa with next having an additional benefits to host your api in different infrastructure if you are using vercel.&lt;/p&gt;

&lt;p&gt;Thats all you need to know, go try it out and see if you like it. I'll be going into further details for the ones that are interested in how to do this in sveltekit.&lt;/p&gt;

&lt;p&gt;Here is the code to make your sveltekit app into an spa:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// svelte.config.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;adapter&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@sveltejs/adapter-static&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;kit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;adapter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;adapter&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
            &lt;span class="na"&gt;fallback&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;200.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="c1"&gt;// may differ from host to host&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You must turn off ssr in the root &lt;code&gt;+layout.js/ts&lt;/code&gt; in order to make your app into an spa. Fallback html is different depending on the host, for vercel, use 404.html&lt;/p&gt;

&lt;p&gt;Note: using prerender + eager preloading will help with caches (will talk about this in another post)&lt;/p&gt;

&lt;p&gt;Read more about sveltekit true spa here: &lt;a href="https://svelte.dev/docs/kit/single-page-apps" rel="noopener noreferrer"&gt;https://svelte.dev/docs/kit/single-page-apps&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
