Is it acceptable for Single Page Web Apps to have multiple requests at startup?

I've been dedicated to developing a Single Page Web App (SPA) recently. The frontend is built with BackboneJS/Marionette, while the backend is powered by Java Spring :(. However, I've noticed that the application's start time could be sluggish due to multiple requests being sent to various API endpoints to fetch data for different parts of the app. Even though these are AJAX requests and run asynchronously, it still seems slow. What would be considered best practice in this situation? Initially, I was contemplating consolidating all data into one extensive request, but I'm not certain if that's optimal. Any guidance or code examples would be greatly appreciated.

javascriptajaxperformancebackbone.jssingle-page-application

Answer №1

When preparing for page load, it is important to include all necessary data in the default html and initialize objects with it. In my case, I utilize AMD to achieve this:

<script data-main="app" src="/lib/require.js"></script>
<script>
define('load', function(){return {
    mymodel : <c:out value="${mymodel}" default="{}" />,
        ...
};});
</script>

In the app.js file:

require([ 'MyModel', 'load'], function(MyModel, load) {
  var myModel = new MyModel(load.mymodel);
   ...
})

Answer №2

Having a single significant request can prove to be beneficial. It might be something you want for synchronization purposes.

Including dynamic content in the HTML file hinders caching of the front end code. This means you cannot deploy your front end as a static entity - like packaging it into a mobile application, for instance. Moreover, this could potentially slow down the initial rendering process, causing the overall loading time of the app to increase slightly due to the need for two requests instead of just one.

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

Trying out the Deezer app and receiving the message: "Please provide a valid redirect URI."

While testing an application using the Deezer JavaScript SDK, I encountered an issue when trying to login as it prompted me with a "You must enter a valid redirect uri" message. Here is the setup: DZ.init({ appId: '000000', channelUrl: ...

javascriptdeezer

Utilizing Material-UI Select for creating a number range dynamically

Seeking a solution to create a select element using material-ui that offers a range of numbers from 0 to 20,000,000 in increments of 25,000. Currently, I have accomplished this using a for loop. for (let price = 0; price <= 20000000; price = price + 250 ...

javascriptreactjsmaterial-ui

Filling two PrimeFaces components with data

Every time I choose a Folder name on my page, it triggers the population of two Components (<p:selectManyMenu> and <p:pickList>). How can I make sure that both actions are called correctly? <p:selectOneMenu id="dirObj" valu ...

ajaxjsfprimefaces

Application utilizing Meteor to connect with external websites or applications

Hey everyone, I'm in the process of developing an application that features a directory of stores. One key requirement is that each store has a unique view created with either Flash or JavaScript. The special view components have already been develope ...

javascriptjquerynode.jsflashmeteor

What is the method for sending column items using the pageItems parameter in apex.server.process?

According to the Oracle APEX 19.1 documentation on the JS API, it is mentioned that column items can be passed in apex.server.process. How can this feature be utilized? I am attempting to send the value of a column item to an AJAX callback function using ...

ajaxoracleoracle-apex

Having trouble uploading files to tastypie using Backbone?

After reviewing some other questions, I believe my tastypie resource needs to be structured like this: class MultipartResource(object): def deserialize(self, request, data, format=None): if not format: format = request.META.get(&ap ...

ajaxdjangobackbone.jstastypie

What are some methods for displaying images retrieved from an API onto an HTML webpage?

Problem: The image is not appearing on my HTML page. How can I fix this issue? Please see below for details. Here are the code snippets I am using to display the image: <div class="col-md-7"> <div class="table-responsive" ...

javascripthtmlajax

Is there a way to assign a value to an Angular-specific variable using PHP?

In the development of my Angular 4 application, I encountered an issue while receiving JSON data based on an id value through a PHP script. Upon examining the code, it seems that there should be a value passed into this.PropertiesList. examineProperties(i ...

javascriptphpjsonangulartypescript

Should front-end and back-end share Typescript data modeling through classes or interfaces?

I'm currently exploring the best approach to share the same data types between the client (React) and the server (Express + Socket.IO). Within my game, there are various rooms each storing the current status, such as: class GameRoom { players: P ...

javascriptreactjstypescriptexpress

Are the commands overlapping?

Currently, I am in the process of developing a dynamic discord chat bot using JavaScript and node.js. One of my goals is to implement a specific command without interfering with an existing one. The bot functions flawlessly across all servers where it is ...

javascriptnode.jsdiscorddiscord.js

Ways to convert an object with values into an array containing those values

To process the JSON data and convert it into an array with the same values for insertion into my PostgreSQL database using pool.query(message, values), where values should be an array if multiple are present. Currently, my object structure is as follows: { ...

javascriptnode.jsreactjs

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

javascriptjquerynode.jsexpresspug

Encountering a data retrieval issue when using the useSWR hook in a project using reactjs

I am trying to retrieve data from the backend using useSWR. However, I have encountered two bugs in the function getDataUseSWR. The errors occur at line 'fetch(url).then': 1: "Expected 0 arguments, but got 1."; 2: "Property 'then' does ...

javascriptreactjsnext.jsfetch-api

Error code E11000 is indicating that a duplicate key issue has occurred in the collection "blog-api.blogs" where the index "id_1" is

Issue with Error E11000 duplicate key error collection: blog-api.blogs index: id_1 dup key: { id: null } Encountering an error when trying to insert data after initially inserting one successfully. Referencing the blogSchema.js: const mongoose = req ...

javascriptnode.jsmongodb

Converting a Base64 URL to an image object: A step-by-step guide

I currently have a base64 URL in the following format: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAA My objective is to convert this into an image file with the following properties: [File] 0: File lastModified: 1559126658701 lastModifiedDate: Wed M ...

javascriptreactjsbase64

Validation of a string or number that is not performing as expected

I have been working with the yup library for JavaScript data validation, but I am encountering unexpected behavior. Despite thoroughly reviewing their documentation, I cannot pinpoint where I am misusing their API. When I run the unit test below, it fails ...

javascriptjsonvalidationyup

Is it safe to securely store connection credentials in javascript?

I am currently working on developing a web chat app for a Minecraft server using this API. However, the demo script I am referring to displays connection information in plain text, making it easily visible to any client's computer. Is there a way to s ...

phpjavascriptmysqlsecurity

How can I retrieve data from a script tag in an ASP.NET MVC application?

I'm struggling to figure out how to properly access parameters in a jQuery call. Here is what I currently have: // Controller code public ActionResult Offer() { ... ViewData["max"] = max; ViewData["min"] = min; ... return View(paginatedOffers ...

javascriptasp.net-mvc

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

Ways to change the URL post saving a cookie with express?

I have written this code for user login in my Express router: if (password === realpassword) { res.cookie('thecookie', 'somethingliketoken'); res.redirect(302, '/somepages'); } else { res.status(403).end(); } The ...

javascriptnode.jsexpresscookiesauthentication