render component on client side

7/25/2022, 12:04:52 AM

by Leo Voon

You could do, in sveltekit

import { browser } from '$app/environment'

{#if browser}
  <Component />
{/if}

You can also make use of actions and onMount which never run on the server.

Or load components asynchronously :

let lazyComponent;

function load() { 
 lazyComponent = import(`lazyComponent.svelte`)

<button on:click={load}>Render it</button>

// since lazyComponent is a promise, you can
{#await lazyComponent then { default: LazyComponent } }
    <LazyComponent />
{/await}