Is there any benefit to fetching data in `{#await}` or `onMount` instead of `load` in SvelteKit, especially considering the impact on `+server`?

keyword: displaying loading spinner

Imagine accessing a route like /dashboard, where most of the page content remains constant but certain sub-components require real-time data. If I retrieve this data within a load function, the entire route will remain blank until the data is fetched.

Another approach would be to fetch data during onMount or utilizing {#await}, which allows for the inclusion of a loading spinner to enhance user experience. (In cases where server-side fetching is necessary, an API route can be used)

This leads to the question - when is it appropriate to use the load method? Is it primarily for clients with slow internet connections, JavaScript disabled clients, or for SEO purposes?

javascriptsveltekit

Answer №1

Avoid pointing fingers at the client; your application could potentially be sluggish if a loading spinner is necessary 😅

While it's true that certain tasks may require more time to complete, there are often instances where server data can be quickly loaded without hindering the overall user experience.

For example, fetching data about the current user for a user menu or avatar should not cause unnecessary delays for other parts of the page.

My suggested approach would be:

  • Monitor loading times and utilize load (page or layout) if load times are quick
  • Consider optimizing slow processes if possible
  • If slowdowns are inevitable, consider loading items separately

Answer №2

If you want to ensure that your data is essential, it is recommended to use the load() function. Keep in mind that onMount() relies on JavaScript, so if JavaScript is disabled or not functioning properly, this function will not be executed.

However, if you are comfortable with the data not always being loaded, you can still utilize the onMount() function. In such cases, the content may appear "stuck" at the loading spinner when JavaScript is disabled. You can experiment by disabling JS to see the effect.

An alternative method to onMount() called 'Streaming with promises' has been introduced in SvelteKit. This feature allows you to await long-running promises directly from the +page.svelte file, as long as the promise is not on the top level. Please note that streaming requires both JavaScript and a platform that supports streaming capabilities (AWS Lambda and similar serverless platforms do not support streaming).

There might also be a planned feature called +loading.svelte in the future roadmap of SvelteKit. It's unclear whether 'Streaming with promises' is the same feature discussed in this resource: https://www.youtube.com/watch?v=N4BRVkQVoMc&t=6993s

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to manage the order of RequestExecutor execution

I have recently developed an intranet site using SharePoint Office 365. Within the master page file, there is a menu bar that utilizes a List to store the URL and name. My goal is to control the visibility of the "Admin" button based on whether the user ...

javascriptjqueryjsonsharepoint-2013office365

Communicate through PHP and JavaScript chat to display HTML content in the chat window

I have been attempting to display HTML output in the chat window but instead, it is showing the HTML code. Here are the two files involved in the chat system: chat.js `function chatHeartbeat(){ var itemsfound = 0; if (windowFocus == false) { var ...

javascriptphpjqueryhtmlmysql

Utilize HTML search input to invoke a JavaScript function

I am currently facing an issue with a navbar form that I have created. The goal is to allow users to input either a 3 digit number or a 5 digit number, which should then trigger a function to open a specific link based on the input. However, I am strugglin ...

javascripthtmlforms

Splicing using only one parameter will make changes to the array without deleting the entire array

let myArray = ['a','b','c','d','e']; console.log(myArray.splice(1)); console.log(myArray); Looking at the splice documentation, it mentions that not providing a delete parameter would remove all array item ...

javascript

Error in SO Embed Snippet Fiddle due to Bootstrap 4 JS Issue

Just wondering, any idea why the bootstrap 4 js is throwing this error: https://i.sstatic.net/J4Iq4.png when trying to embed the snippet? (No errors in the external Fiddle) Added tether.js but no luck (kept it commented). Switched to jQuery 2.2.1 on th ...

javascriptjquerystack-overflowjsfiddletwitter-bootstrap-4

Enhance Your Website with HTML and JavaScript

Here is the code snippet I am working with: sTAT **javascript** var acc = document.getElementsByClassName("item-wrapper"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("selected"); this.nextElementS ...

javascriptjqueryhtmlcss

Using JavaScript to consume ASP.net Script Services

My ASP.NET script service needs to be accessed from JavaScript using JSONP due to cross-domain restrictions. When dealing with a complex input structure, I have to construct the client-side input structure myself. How does the matching between the client ...

asp.netjavascriptweb-services

Problems with Angular functionality

I'm a newbie when it comes to Angular and I'm eager to start practicing some coding. I've put together a simple app, but for some reason, the Angular expression isn't getting evaluated in the browser. When I try to display {{inventory.p ...

javascriptangularjs

Is it possible to send props to a component within the render method?

I have a button component in my render method (DownloadReportsButton) that will trigger a modal onClick and perform an API call. The logic for the modal and the API call have already been moved to the button component, but how do I pass my data (an array ...

javascriptreactjs

At times, the animation in SetInterval may experience interruptions

I have created an animation using a sequence of images. The animation runs smoothly with the setinterval function, but for some reason, it occasionally pauses. I've shared a fiddle where you can see this pause happening. Click Here to See the Unwante ...

javascriptjquerycsshtmlsetinterval

The Google map shifts beyond the perceived limits of the world

Is anyone else encountering an issue with Google Maps where you can now pan beyond the poles? It used to stop at the poles before, correct? The website I'm currently working on runs a location-based query on our server every time a user pans or zooms ...

javascriptgoogle-maps

Parcel js is encountering difficulties running the same project on Ubuntu

I have encountered an issue with my JavaScript project when trying to run it on Ubuntu using parcel 2 bundler. The code works perfectly fine on Windows, but in Ubuntu, I am facing errors. Despite trying various solutions like cleaning the cache and reinsta ...

javascriptnode.jsnpmparceljs

What's the best way to make a toast notification appear when an API call is either successful or encounters

Seeking guidance on incorporating toast messages within an Angular + Ionic 6 application... My goal is to display a toast message in response to events such as clearing a cart or submitting an order, with the message originating from an API call. While a ...

javascriptangulartypescriptionic-framework

Troubleshooting a JavaScript error: Script.js throwing 'Uncaught TypeError' at line 5

While working on a small project, I encountered a JavaScript error that reads: script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') at script.js:5:18 Below is the HTML & JavaScript code snippet that triggered thi ...

javascripthtmlcss

Challenges with Organizing Data and Maintaining Database Integrity

I have been working on making this sortable code function properly. Initially, I had it working fine with <li> elements as shown in the UI examples. However, now I am trying to implement it with <div> elements. While it shouldn't be much o ...

javascriptjqueryjquery-ui-sortable

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Although there are instructions available in Writing NPM modules in Typescript, they are outdated and there are numerous conflicting answers that may not be suitable for Angular. Additionally, Jason Aden has delivered an informative presentation on youtu ...

javascriptnode.jsangulartypescripttypescript2.2

Searching for and replacing anchor tag links within a td element can be achieved using PHP

I am currently customizing my WordPress website and I need to update the URL (product link) of the "product-image" on the "cart" page. I have the following dynamic code: <td class="product-name" data-title="Product"> <a href=&q ...

javascriptjquerywordpress

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

What is the best way to display a SolidJS component on the screen?

I am currently working on a unique menu design for my application. The concept involves rendering a functional component within an element created in the body using createRoot and render methods. https://i.stack.imgur.com/g6Ofv.png export function create ...

javascripthtmldomsolid-js