Photo by Ahmad Ossayli on Unsplash

Load Lazy When Routing

I need to load pages lazy on my website https://onurdayibasi.dev. In this blog post, I mention lazy loading with react-router.

On my website https://onurdayibasi.dev, I try different libraries and technology for experimental and learning new things. Suppose your code is static routing like below. The Application load all of the pages and dependent libraries in the first page render. But this kind of development has some problems with latency and unnecessary network usage. It affects First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

Static Routing

Maybe it's not essential small projects, or the pages are related, and there is no need to load different kinds of libraries.

But in my case, I use lots of different frameworks on every page, so I need lazy page loads.

Lazy Loading

React Lazy provides to load components Lazy with Suspense wrapping. So first, define your routing with React Lazy.

https://reactjs.org/docs/code-splitting.html#reactlazy

React Lazy Code Sample from Reactjs.org

I change the routing code with lazy import. After changing lazy, there is no need to define pages static because Route can also take components programmatically. First, we define routes data and give to routes array to App. Below code add new routing paths easily

https://onurdayibasi.dev/.

In the end, you have two jobs to add new plants(pages) to the system. First, develop the page, then give the route definition.

Let's continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store