Lazy Loading
CBWIRE supports lazy loading for components that might delay the initial page load.
Consider a component StockTicker
that fetches real-time stock data, a process that can be slow:
Without lazy loading, this component would slow down the page load. To enable lazy loading:
With lazy loading, CBWIRE skips the component during the initial load. Once visible, it loads the component via a network request.
Lazy requests are isolated and not bundled as with Request Bundling, allowing each to load independently and quickly when the page loads, maintaining performance.
Placeholder
By default, CBWIRE inserts an empty <div></div>
before a component fully loads. To improve user experience and indicate loading, you can implement a placeholder()
method in your component to display custom HTML, such as loading spinners.
Consider a component FinancialReport
that processes a slow data query:
This setup ensures users see a loading spinner until FinancialReport
is fully loaded.
The placeholder and the main component must use the same type of root element, like a div
.
Loading Outside the Viewport
Normally, lazy-loaded components only load once within the browser's viewport (e.g., when a user scrolls down). If you'd like to load all components immediately after the page is ready, pass "on-load"
to the lazy
parameter:
This way, StockTicker
will fully load after the page is ready without needing to be visible in the viewport.
Passing Parameters
You can treat lazy-loaded CBWIRE components like normal ones by passing data to them from outside. Consider this example where a parent component passes user details into a UserActivity
component:
In mount()
, the component can utilize the passed-in data:
Lazy components will temporarily store passed-in data on the client side until fully loaded. For instance, the username
and days
properties will be serialized and re-queried on the next request, ensuring a smooth user experience.
Because of this, it's important to only pass parameters with lazy-loaded components that can be serialized and read by JavaScript.
Disabling Request Isolation
By default, CBWIRE handles each lazy-loaded component request separately. However, if you want to bundle all updates into a single network request, disable the isolation behavior using lazyIsolate=false
:
Now, if there are multiple UserActivity
components on the same page, their updates will be grouped into a single network request when the page loads.
Last updated