sveltesapper

How context="module" works in Svelte and Sapper?

While I was using Sapper to build a project whenever I fetch data from server, preload function is declared inside of script context="module" like this below.

<script context="module">
  export async function preload(page) {
    return await this.fetch(`https://reqres.in/api/users?page=1`)
    .then(res1 => {
      return res1.json()
    }).then(res2 => {
      return { 
        notices: res2.data,
      }
    })
  }
</script>

According to the document

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance.

But what is the meaning of when the module first evaluates?

Does it mean that when a component first rendered? then isn't the same that declaring api fetch function inside of onMount lifecycle method just like the code below?

<script>
  onMount(async() => {
    const res = await fetch(`https://reqres.in/api/users?page=1`);
    const json = await res.json();
  })
</script>
Solution

  • Consider a regular JavaScript module that exports a class:

    // Component.js

console.log('evaluating module');

export class Component {
  constructor() {
    console.log('instantiating component');
  }
}

    If you import that module into your app, that code will run immediately:

    import { Component } from './Component.js';

// "evaluating module" has already been logged. This will only happen once
// for the entire application, however many modules import Component.js

const component1 = new Component(); // logs "instantiating component"
const component2 = new Component(); // logs "instantiating component" again

    Now we can put it in Svelte terms: