Wasp-lang•7mo ago

Lazy Loading React Components

When making a large application it is best practice to lazy load components as needed. It seems there is no way to lazy load a route in wasp?

route AnotherRoute { path: "/test", to: AnotherRoute }
page AnotherRoute {
  component: import { AnotherRoute} from "@src/client/AnotherRoute",
}

route AnotherRoute { path: "/test", to: AnotherRoute }
page AnotherRoute {
  component: import { AnotherRoute} from "@src/client/AnotherRoute",
}

I have this route definition. It is in the JS bundle even though I have never navigated to it. This would be an issue as the application grows in size, when a user navigates to the landing page, they will need to download the ENTIRE app. Does WASP have a way to lazy load components using the build in routing?

12 Replies

kapa.ai•7mo ago

Hi @Kantros. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The provided knowledge sources do not contain information about lazy loading components in Wasp. I recommend checking the official Wasp documentation or their GitHub repository for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kantros, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•7mo ago

Oh yeah, we don't have this bit supported! Probably it would be a good default IMHO, lazy load all the routes but ... allow people to eagerly load some routes if they really need to. I've created an issue for this: https://github.com/wasp-lang/wasp/issues/2007

GitHub

Add support for lazy loading Wasp routes · Issue #2007 · wasp-lang/...

Quote from here: Lazy loading is a strategy that defers the loading of non-essential resources until they are needed, reducing the initial loading time and improving the overall performance of the ...

KantrosOP•7mo ago

Darn. I’ll have to use another framework. Will have to revisit in the future, the DSL is super interesting! Unfortunately I don’t have time to learn Haskel so I can’t help on the issue.

miho•7mo ago

What's your use case? If you could help us to understand it better it would help us with building Wasp 🙂

KantrosOP•7mo ago

What specifics would you be interested in? The company I work at it’s writing out a spec that basically does what wasp does. I’ve been experimenting with wasp to see if it would be sufficient. The issue is the client facing application is huge (it’s being rewritten from php). Requiring a massive bundle wouldn’t compete with other options in the market.

miho•7mo ago

Requiring a massive bundle wouldn’t compete with other options in the market.

This makes a lot of sense as an argument for us to prioritise lazy loading of routes 😄 thanks for sharing What kind of app is roughly speaking? If you can share some details? Just my curiosity

Sonjho•6mo ago

@miho Hi, i've seen that issue #2007 regarding lazy loading routes is still open, may I ask if there is any way how i could implement it myself, or if it is not an easy task - what can i read to understand more about it? i am building a radio platform and it already got quite big in size

miho•6mo ago

One thing you can do is to use the Route component directly inside of some of your more top-level comonents e.g. the client root or the page at /. Keep in mind this is a bit hackish since you lose the auth checks and some type safety for the Wasp's Link component. You can do something like this. In your Wasp file:

route HomeRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true,
  component: import Main from "@src/pages/Main"
}

route HomeRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true,
  component: import Main from "@src/pages/Main"
}

In the Main.tsx file:

import { Route } from 'react-router-dom'
import { lazy } from 'react'

const AboutPage = lazy(() => import('./pages/About'))

function MainPage() {
  return <div><Route path="/about" component={AboutPage}></Route></div>
}

import { Route } from 'react-router-dom'
import { lazy } from 'react'

const AboutPage = lazy(() => import('./pages/About'))

function MainPage() {
  return <div><Route path="/about" component={AboutPage}></Route></div>
}

Ideally, Wasp would give you an option to set a route to "lazy" and then it would do this for you 🙂 that's what we plan to do with issue #2007

Sonjho•6mo ago

Do i understand correctly, that if I use direct approach in main.tsx as in example above - i am losing ability to set "authRequired" property?

miho•6mo ago

If you use the code I provided above, you'll get the authRequired behaviour for MainPage only (the user in props and the validation check) but you wouldn't get get user in props for the AboutPage -> you can simply pass it from the MainPage to the AboutPage manually. Since AboutPage is nested inside of the MainPage, you'd get the benefit of auth checks still, though!

Sonjho•6mo ago

Thank you so much! Now i understand what i should investigate 🙂

MEE6•6mo ago

Wohooo @Sonjho, you just became a Waspeteer level 1!

Gaming

Programming

Lazy Loading React Components