Render differently when pre-rendering

[notramo]

Is it possible to detect if the component is live, or being pre-rendered? This would be used to:

• render noscript fallbacks in the pre-rendered document
• avoid pre-rendering bandwidth-heavy elements in order to speed up loading the components (because the page is not interactive until the components are loaded, and also #239)
• avoid loading images in pre-rendered document because of #238
• render only a loading screen in the pre-rendered document if interactivity is a must

Some examples

Loading screen:

{#if plenti.prerender}
  <h1>Loading...</h1>
{:else}
  <p>{description}</p>
{/if}
</div>

Placeholder instead of image, to speed up Svelte components loading:

{#if plenti.prerender}
  <div> class="img-placeholder"></div>
{:else}
  <img src={image_src}>
{/if}

[notramo]

I discovered that some APIs are not available at build time, e.g. window. So it can be detected with typeof window === 'undefined'.

Please leave open this issue as a reminder to include this information somewhere in the tutorial (I might add it later when I get more familiar with Plenti).

[jimafisk]

Yeah window is only available for CSR. During the build we create HTML fallbacks using SSR, so window will not be available because there isn't a browser at that time. You can get around this by putting references to window inside an onMount so it only loads clientside once the component is mounted and is ignored during SSR.