Using data in pages in Svelte - Performance & Optimization

Performance: Using data in pages

MEDIUM IMPACT

This affects how quickly the page loads and updates by controlling data fetching and rendering timing.

Displaying data fetched directly in the page component

Svelte

  <script context="module">
    export async function load() {
      const res = await fetch('/api/data');
      const data = await res.json();
      return { props: { data } };
    }
  </script>

  <script>
    export let data;
  </script>

  <p>{data.message}</p>

Using the load function fetches data before the page renders, allowing immediate display and faster LCP.

📈 Performance GainReduces LCP by 300-500ms and avoids layout shifts by rendering stable content immediately.

Displaying data fetched directly in the page component

Svelte

  <script>
    let data;
    fetch('/api/data')
      .then(res => res.json())
      .then(json => data = json);
  </script>

  {#if data}
    <p>{data.message}</p>
  {/if}

Fetching data inside the component delays rendering until data arrives, causing slower Largest Contentful Paint and possible layout shifts.

📉 Performance CostBlocks initial render until fetch completes, increasing LCP by 300-500ms depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch data inside component after render	Minimal initially, but triggers updates	Triggers 1 reflow per data update	Multiple paints as data arrives	[X] Bad
Fetch data in load function before render	DOM built with data ready	Single layout and paint	Single paint with stable content	[OK] Good
Load minimal data first, fetch large data lazily	Initial DOM small, updates later	1 reflow when large data arrives	Initial paint fast, later paint deferred	[!] OK

Rendering Pipeline

Data fetching timing affects when the browser can paint the page content. Fetching data early allows style calculation and layout to proceed without delay. Late data fetching causes reflows and repaints when data arrives.

→Data Fetching

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckData Fetching and Layout

Core Web Vital Affected

LCP, INP

This affects how quickly the page loads and updates by controlling data fetching and rendering timing.

Optimization Tips

1Fetch data in the load function to have it ready before rendering.

2Avoid passing large data objects directly; load them lazily if possible.

3Minimize layout shifts by rendering stable content on first paint.

Performance Quiz - 3 Questions

What is the main performance benefit of fetching data in the Svelte load function instead of inside the component?

A Data is ready before rendering, reducing Largest Contentful Paint delay.

B It reduces the total amount of data fetched.

C It avoids any network requests.

D It automatically caches data in the browser.

DevTools: Performance

How to check: Record a page load, then look for long gaps before first content paint and multiple layout or paint events after load.

What to look for: Check if data fetching delays initial paint (LCP) or causes multiple reflows and repaints indicating late data updates.

Practice

1. In Svelte, how do you display a variable's value inside the HTML of a page?

easy

A. Use parentheses like (variable) inside the HTML.

B. Use curly braces like {variable} inside the HTML.

C. Use angle brackets like <variable> inside the HTML.

D. Use quotes like "variable" inside the HTML.

Solution

1. Step 1: Understand Svelte's data binding syntax

   Svelte uses curly braces {} to insert JavaScript expressions or variables into HTML.

2. Step 2: Identify correct syntax for variable display

   Using {variable} inside HTML shows the variable's value dynamically.

3. Final Answer:

   Use curly braces like {variable} inside the HTML. -> Option B

4. Quick Check:

   Display variable = {variable} [OK]

Hint: Remember: curly braces show variables in HTML [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Trying to use angle brackets for variables
• Putting variable names inside quotes

2. Which of the following is the correct way to declare a variable in a Svelte page's <script> block?

easy

A. const name 'Svelte';

B. var name = 'Svelte';

C. let name = 'Svelte';

D. name = 'Svelte';

Solution

1. Step 1: Recall JavaScript variable declaration in Svelte

   Svelte uses standard JavaScript inside <script>, so let is the preferred way to declare variables that can change.

2. Step 2: Check syntax correctness

   let name = 'Svelte'; correctly declares a variable with a string value.

3. Final Answer:

   let name = 'Svelte'; -> Option C

4. Quick Check:

   Variable declaration = let [OK]

Hint: Use 'let' for variables inside <script> [OK]

Common Mistakes:

• Missing '=' sign in declaration
• Using 'var' which is outdated
• Not declaring variable with let/const

3. Given this Svelte code snippet, what will be rendered on the page?

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

medium

A. AppleBananaCherry

B. fruits

C. Apple, Banana, Cherry (plain text, no list)

D. Syntax error, nothing renders

Solution

1. Step 1: Understand the {#each} block

   The {#each} block loops over the array fruits and creates an <li> for each item.

2. Step 2: Check the output structure

   Each fruit name is inserted inside <li>, so the output is a list with three items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   Loop over fruits = list items [OK]

Hint: {#each} creates list items for array elements [OK]

Common Mistakes:

• Expecting plain text instead of list
• Misunderstanding {#each} syntax
• Thinking it outputs variable name instead of values

4. What is wrong with this Svelte code snippet?

<script>
  let count = 0
</script>

<button on:click={count++}>Click me</button>
<p>Clicked {count} times</p>

medium

A. The variable count should be declared with const, not let.

B. The event handler syntax is incorrect; it should be a function.

C. The <p> tag cannot use curly braces for variables.

D. There is no problem; the code works fine.

Solution

1. Step 1: Check event handler syntax

   In Svelte, the expression count++ inside on:click is valid and works as an event handler that increments count.

2. Step 2: Confirm no syntax errors

   The code correctly updates count and displays the updated value.

3. Final Answer:

   There is no problem; the code works fine. -> Option D

4. Quick Check:

   Event handler with expression increment works [OK]

Hint: Direct expressions like count++ work as event handlers in Svelte [OK]

Common Mistakes:

• Writing expressions directly in event handlers is invalid
• Using const for variables that change
• Thinking curly braces can't be used in HTML

5. You want to display a list of users with their names and ages on a Svelte page. The data is:

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 }
];

Which code snippet correctly shows each user's name and age inside a <div> using {#each}?

hard

A. {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div>{/each}

B. {#each users} <div>{name} is {age} years old</div>{/each}

C. {#each users as user} <div>{name} is {age} years old</div>{/each}

D. {#each users as user} <div>{user} is {age} years old</div>{/each}

Solution

1. Step 1: Understand {#each} syntax with index

   The syntax {#each users as user, index} correctly loops over users and provides both user object and index.

2. Step 2: Check variable usage inside loop

   Inside the loop, {user.name} and {user.age} correctly access properties. Including index shows user number.

3. Final Answer:

   {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div> {/each} -> Option A

4. Quick Check:

   Loop with index and user properties = {#each users as user, index}
<div>User {index}: {user.name} ({user.age})</div>
{/each} [OK]

Hint: Use 'as item, index' to get position and data in {#each} [OK]

Common Mistakes:

• Omitting 'as' keyword in {#each}
• Trying to access properties without user prefix
• Using undefined variables like 'age' alone