SvelteTips - Irregular Svelte series 05

<h1 id="svelte-tips" data-line="0" class="code-line"><a class="header-anchor-link" href="#svelte-tips" aria-hidden="true"></a> Svelte Tips</h1>
<p data-line="3" class="code-line">Hello (or good evening), this is part 5 of our irregular Svelte series. Click here to see the other articles:</p>
<ol data-line="5" class="code-line">
<li data-line="5" class="code-line"><a href="/posts/2022_09_06_svelte_newpost_en/">Insights from using SvelteKit + Svelte for a year</a></li>
<li data-line="6" class="code-line"><a href="/posts/Svelte-magazine-001-Svelte%E3%81%A8%E4%BB%96JS%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83-en/">Comparison of Svelte and other JS frameworks - Irregular Svelte series-01</a></li>
<li data-line="7" class="code-line"><a href="/posts/Svelte-magazine-002-Svelte%E3%81%A6%E3%82%99%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88-en/">Svelte unit test - Irregular Svelte series 02</a></li>
<li data-line="8" class="code-line"><a href="/posts/Svelte-magazine-003-Svelte%E3%81%A7Storybook%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B-en/">Using Storybook with Svelte - Irregular Svelte Series 03</a></li>
<li data-line="9" class="code-line"><a href="/posts/Svelte-magazine-004-Astro%E3%81%A7Svelte%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F-en">Exploring Svelte in Astro - Irregular Svelte series 04</a></li>
<li data-line="10" class="code-line"><a href="/posts/Svelte-magazine-005-SvelteTips-en/">SvelteTips - Irregular Svelte series 05</a></li>
</ol>
<p data-line="13" class="code-line">That's a lot of articles so far!</p>
<p data-line="15" class="code-line">This time, I will use the project we have in the previous articles and explain parts where you may go be like, <strong>"I'm stuck!" "what to do?"</strong> in a way that is easy to understand. The table of contents looks as follows:</p>
<ul data-line="17" class="code-line">
<li data-line="17" class="code-line">SSG Settings</li>
<li data-line="18" class="code-line">Differences Between <em>.page.ts and</em> .server.ts</li>
<li data-line="19" class="code-line"><code>meta</code> and How to Use It (About the Plugin)</li>
<li data-line="20" class="code-line">What is Used in Each Life Cycle</li>
</ul>
<h2 id="ssg-settings" data-line="22" class="code-line"><a class="header-anchor-link" href="#ssg-settings" aria-hidden="true"></a> SSG Settings</h2>
<p data-line="24" class="code-line">With SvelteKit, you can easily configure deployment destinations by using a module called Adapter. The default is an SSR adapter called <code>adapter-auto</code>, so you need to install a module called adapter-static.</p>
<p data-line="26" class="code-line">I remember being stuck at first and wracking my brain. It was named "auto," so it must do something.</p>
<p data-line="28" class="code-line">But that was not the case.</p>
<p data-line="30" class="code-line">By just implementing adapter-static and writing the code in the documentation, I quickly created a build file optimized for static hosting (note to self to read documentations properly...)</p>
<p data-line="32" class="code-line">The official site of Svelte has a Japanese translation of PJ, so having translated documentation available was very helpful :)</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">svelte.config.js</span></div><pre class="language-js"><code class="language-js code-line" data-line="34"><span class="token comment">// without this, you can't build as an SSG</span>
<span class="token keyword module">import</span> <span class="token imports">adapter</span> <span class="token keyword module">from</span> <span class="token string">'@sveltejs/adapter-static'</span><span class="token punctuation">;</span>

<span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@sveltejs/kit'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Config<span class="token punctuation">}</span></span> */</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// omitted</span>
<span class="token literal-property property">kit</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">adapter</span><span class="token operator">:</span> <span class="token function">adapter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">pages</span><span class="token operator">:</span> <span class="token string">'build'</span><span class="token punctuation">,</span>
<span class="token literal-property property">assets</span><span class="token operator">:</span> <span class="token string">'build'</span><span class="token punctuation">,</span>
<span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
<span class="token literal-property property">precompress</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">strict</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword module">export</span> <span class="token keyword module">default</span> config<span class="token punctuation">;</span>
</code></pre></div><p data-line="55" class="code-line">Details: <a href="https://kit.svelte.jp/docs/adapter-static" target="_blank" rel="nofollow noopener noreferrer">https://kit.svelte.jp/docs/adapter-static</a></p>
<h2 id="differences-between-.page.ts-and-.server.ts" data-line="60" class="code-line"><a class="header-anchor-link" href="#differences-between-.page.ts-and-.server.ts" aria-hidden="true"></a> Differences Between <em>.page.ts and</em> .server.ts</h2>
<p data-line="62" class="code-line">This was a setback when SvelteKit v1 was released and it changed significantly. It was a radical change, so you might remember it.</p>
<p data-line="64" class="code-line">Since the release of v1, SvelteKit inserts the following two files by default when fetching data in a page.</p>
<ul data-line="66" class="code-line">
<li data-line="66" class="code-line">.svelte => Files such as UI</li>
<li data-line="67" class="code-line">.page.server.ts || *.page.ts => a file that defines data such as fetch</li>
</ul>
<p data-line="69" class="code-line">The files that define data are divided into <em>page.ts and</em> page.server.ts.</p>
<p data-line="71" class="code-line">I didn't understand the difference between *.page.ts and *.page.server.ts at first, so I opted for SSG. However, <strong>during transitions, it began fetching data from the API</strong> .... Like whaat?!</p>
<p data-line="73" class="code-line">For *.page.ts, <strong>it runs on both client-side and server-side</strong></p>
<p data-line="75" class="code-line">For *.page.server.ts, it runs only on the <strong>server-side</strong></p>
<p data-line="77" class="code-line">So, if you want to JAMSTACK with SSG, *page.server.ts is the right way to go.</p>
<p data-line="79" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__bf8fbfa75c4aa" src="https://embed.zenn.studio/card#zenn-embedded__bf8fbfa75c4aa" data-content="https%3A%2F%2Fkit.svelte.jp%2Fdocs%2Fload%23universal-vs-server" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://kit.svelte.jp/docs/load#universal-vs-server" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://kit.svelte.jp/docs/load#universal-vs-server</a></p>
<p data-line="81" class="code-line">So again, please read the documentation! The documentation is great.</p>
<p data-line="83" class="code-line">Correct example of running only on the server side</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/routes/+page.server.ts</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="85"><span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> params<span class="token punctuation">,</span> fetch <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> pagesReq <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string"></span><span class="token string">APIURL</span><span class="token template-punctuation string"></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword control-flow">await</span> pagesReq<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
data
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="how-to-manage-meta" data-line="95" class="code-line"><a class="header-anchor-link" href="#how-to-manage-meta" aria-hidden="true"></a> How to Manage <code>meta</code></h2>
<p data-line="97" class="code-line">Managing <code>meta</code> information poses a common challenge for all frameworks and websites.</p>
<p data-line="99" class="code-line">Before discovering the framework, I used to laboriously work with the trifecta Pug, JSON, and Gulp or Webpack, but with Svelte it became easier to deal with them.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/components/Meta.Svelte</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="102"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
import { siteTitle, siteDescription } from '$lib/config';
interface META {
title: string;
description?: string;
}

export let metadata: META;
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>metadata<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">｜</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>siteTitle<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string"></span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>

<span class="token punctuation">{</span>#<span class="token keyword control-flow">if</span> metadata<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>metadata<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">{</span><span class="token operator">:</span><span class="token keyword control-flow">else</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>siteDescription<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">{</span><span class="token operator">/</span><span class="token keyword control-flow">if</span><span class="token punctuation">}</span>
</code></pre></div><div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/routes/+page.svelte</span></div><pre class="language-jsx"><code class="language-jsx code-line" data-line="123"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
import Meta from '$lib/components/Meta.svelte';

let metadata = {
title: 'title, title, title',
description: 'description, description, description, description'
};
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>

<span class="token operator"><</span><span class="token maybe-class-name">Meta</span> <span class="token punctuation">{</span>metadata<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre></div><p data-line="136" class="code-line">You can create and load a <code>meta</code> component like this.</p>
<p data-line="138" class="code-line">You don't have to make it yourself as there are wonderful plugins such as this one out there.<br style="display:none" />
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f6d6a96a2739b" src="https://embed.zenn.studio/card#zenn-embedded__f6d6a96a2739b" data-content="https%3A%2F%2Fgithub.com%2Foekazuma%2Fsvelte-meta-tags" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/oekazuma/svelte-meta-tags" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/oekazuma/svelte-meta-tags</a></p>
<p data-line="141" class="code-line">Thank you kind stranger!!!!</p>
<h2 id="on-the-usefulness-at-each-life-cycle" data-line="145" class="code-line"><a class="header-anchor-link" href="#on-the-usefulness-at-each-life-cycle" aria-hidden="true"></a> On the Usefulness at Each Life Cycle</h2>
<p data-line="147" class="code-line">Finally, the unavoidable life cycle functions</p>
<p data-line="149" class="code-line">Svelte has five life cycle functions: <strong>onMount, onDestroy, beforeUpdate, afterUpdate, and tick</strong>.</p>
<p data-line="153" class="code-line"><strong>onMount</strong></p>
<p data-line="155" class="code-line">As the name implies, this is executed after the component is initially rendered to the DOM. Timing is almost the same as mounted hook in Vue.</p>
<p data-line="157" class="code-line"><strong>onDestroy</strong></p>
<p data-line="159" class="code-line">As the name implies, this is also executed when the component is destroyed. You can prevent memory leaks by discarding components when processing is no longer necessary.</p>
<p data-line="161" class="code-line">Also, for server-side components, only this lifecycle function is available.</p>
<p data-line="163" class="code-line"><strong>beforeUpdate</strong></p>
<p data-line="165" class="code-line">This component is a lifecycle function used before the DOM is rendered. Also, beforeUpdate is used often when you want to reflect state changes first.</p>
<p data-line="167" class="code-line">Since this life cycle function is used before the DOM is rendered, you need to be careful when writing processing related to the DOM.</p>
<p data-line="170" class="code-line"><strong>afterUpdate</strong></p>
<p data-line="172" class="code-line">This function is executed after the component is rendered by the DOM and the data is reflected.

It's the last life cycle function to be found on Svelte.</p>
<p data-line="175" class="code-line"><strong>tick</strong></p>
<p data-line="177" class="code-line">You can handle the timing after a state is updated and before the state is rendered into the DOM. It is possible to wait for the DOM to be updated before processing anything.</p>
<p data-line="179" class="code-line">It is relatively easy to understand because it has fewer life cycle functions than other frameworks.</p>
<p data-line="181" class="code-line">This would be all for now on my Svelte Tips article today.</p>
<h2 id="conclusion" data-line="184" class="code-line"><a class="header-anchor-link" href="#conclusion" aria-hidden="true"></a> Conclusion</h2>
<p data-line="185" class="code-line">I wrote a <strong>special article about Svelte titled "Getting Started with Svelte"</strong> in the July 2023 issue of Software Design, a Japanese Magazine. Please feel free to give it a read if you're interested :)

(It also includes a tutorial to JAMSTACK in SSG, so give it a try!)</p>
<p data-line="188" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__bd2309e8f4776" src="https://embed.zenn.studio/tweet#zenn-embedded__bd2309e8f4776" data-content="https%3A%2F%2Ftwitter.com%2Fgihyosd%2Fstatus%2F1669533941483864072%3Fs%3D20" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/gihyosd/status/1669533941483864072?s=20" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/gihyosd/status/1669533941483864072?s=20</a></p>