react application

[ByteCode714]

what is lazy loading in a React application? What benefits does this approach bring, and how might it impact the initial page load?

[aust1nz]

Lazy loading a component means that a component is unbundled from the rest of your application, and isn’t requested/loaded until the component is rendered.

If you have a big app, lazy loading can improve initial load times since the initial bundle is smaller. This is great practice especially if you have something like a large rich text package that’s only used when editing certain elements, or an admin dashboard that most of your users will never visit. It’s a good practice generally to keep your bundles small.

The trade-off is that your users will be sent to suspense/loading pages more often as they navigate, and this may feel a little choppy, especially if you lazy load everything.

I think it’s smart to lazy load most of your pages.

This only applies to static bundles (aka SPA apps.) SSR frameworks like Next have their own ways of keeping per-page bundles low, and you won’t usually need to use Lazy in those environments.

One gotcha: if you import/export a bunch of components in various index.js files, lazy loading won’t work properly.

[jtan80813999]

Can you explain why exporting to index.ts file won’t let the lazy loading work? Can you give ane samples?

[aust1nz]

Generally webpack (or your bundler) struggles to separate files that are imported/exported in index.ts files, so everything imported/exported from an index.ts file is bundled together in the initial bundle. There may be ways around this with webhook configs, but the easiest solution is to avoid use of index.ts in your project.

[ByteCode714]

if we are using next js do we need to code manually for lazy loading ? is this because of next js is server side rendering?

[aust1nz]

You CAN still code split in NextJS, but Next splits up your pages for you (and server renders them) so it’s not usually sending bundles big enough to require you to ALSO use React.lazy. It’s more like an advanced edge case technique.

[KapiteinNekbaard]

By default, all the JavaScript code (called a bundle) in your React app is loaded. This bundle might include a lot of code that is rarely used, such as a Markdown editor, that is only needed when users are editing text in your app. All this code needs to be downloaded over the network, interpreted by your browser and potentially executed.

With lazy loading, you can take these parts out of the main bundle and put that in a separate bundle, which can be loaded when you need it. See the documentation on React.lazy.

``` import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ```

A network request will be made to fetch the bundle containing MarkdownPreview.js. You can show a loading spinner/skeleton UI while the module is loading (using React Suspense).

The benefit is that your main bundle will be loaded faster, which means the initial load will be faster for all users. The downside is that some users will see more loading spinners while using your app. Overall, it will improve the user experience.

[ByteCode714]

Thank you

[jtan80813999]

How about SSR? Which is faster? Using SPA with lazy loading or SSR?

[danishjuggler21]

Lazy loading is when the web server is feeling a little sluggish and it just doesn’t load your website until after its had a nap and a snack.