Effortless Speed: Next.js Lazy Loading

Code Ryan

Docs: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

30:55

A secret field that summons lightning. A massive spiral that disappears into a salt lake. A celestial observatory carved into a volcano. Meet the wild—and sometimes explosive—world of land art, where artists craft masterpieces with dynamite and bulldozers. In our Season 2 premiere, guest Dylan Thuras, cofounder of Atlas Obscura, takes us off road and into the minds of the artists who literally reshaped parts of the Southwest. These works aren’t meant to be easy to reach—or to explain—but they just might change how you see the world. Land art you’ll visit in this episode: - Double Negative and City by Michael Heizer (Garden Valley, Nevada) - Spiral Jetty by Robert Smithson (Great Salt Lake, Utah) - Sun Tunnels by Nancy Holt (Great Basin Desert, Utah) - Lightning Field by Walter De Maria (Catron County, New Mexico) - Roden Crater by James Turrell (Painted Desert, Arizona) Via Podcast is a production of AAA Mountain West Group.…

about a year ago 19:08

MP3•Episode home

GitHub: https://github.com/coderyansolomon/lazy

Your guide to lazy loading components in Next.js!

296 episodes

#Tech #Ryan Solomon

Code Ryan

Effortless Speed: Next.js Lazy Loading

Code Ryan

published about a year ago

MP3•Episode home

GitHub: https://github.com/coderyansolomon/lazy

Docs: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

Your guide to lazy loading components in Next.js!

296 episodes

#Tech #Ryan Solomon

All episodes

Code Ryan

1
An Anti-Pattern To Avoid In React.js 3:51

3 days ago3:51

3:51

TLDR; don't mutate state directly. Always use setState when updating a piece of state. Also, pass a function when updating state based on previous state.

Code Ryan

1
This Causes An Error In Next.js 4:17

7 days ago4:17

4:17

Today I explain a key point regarding server and client components in Next.js and passing props. Also, I explain what you should know regarding client boundaries in Next.js

Code Ryan

1
An AI Tool That's Actually Worth It For Developers 7:32

10 days ago7:32

7:32

Docs: https://www.korbit.ai/ I'm not affiliated with this tool in any way. We've just found it useful the last few months using it on our team. If you know any tools, or even something better than Korbit, let me know in the comments below.

Code Ryan

1
This One Fix Makes Your Next.js App Faster and Cleaner 8:48

14 days ago8:48

8:48

Learn the recommended way to fetch data in Next.js as well as some patterns to know about client and server components.

Code Ryan

1
Learn Modern React.js In 20 Minutes 20:43

17 days ago20:43

20:43

In todays video, I cover the core concepts of React.js in about 20 minutes. Of course, this isn't everything you need to know. But it is a good starting place and review for some.

Code Ryan

1
What "use client" Really Does In Next.js 10:17

21 days ago10:17

10:17

docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components

Code Ryan

1
Finally Understand Server Components In Next.js 11:36

24 days ago11:36

11:36

Docs: https://nextjs.org/docs/app/building-your-application/rendering/server-components

Code Ryan

1
Understanding Rendering in React & Next.js (The Full Picture) 9:38

28 days ago9:38

9:38

Docs: https://nextjs.org/docs/app/building-your-application/rendering

Code Ryan

1
Optimize Your Code In Next.js With Server Actions 6:29

4 weeks ago6:29

6:29

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Code Ryan

1
Stream Your Data To Fix Bad UX In Next.js 15 7:57

5 weeks ago7:57

7:57

Learn how to use Suspense and streaming for sequential data fetching in Next.js

Code Ryan

1
Developers Really Need To Be Aware Of This 7:32

5 weeks ago7:32

7:32

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#patterns

Code Ryan

1
THIS Is How To Fetch Data In Next.js 7:42

6 weeks ago7:42

7:42

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reference

Code Ryan

1
Did You Know This About Custom Hooks In React.js? 11:51

6 weeks ago11:51

11:51

Docs: https://react.dev/learn/reusing-logic-with-custom-hooks#recap

Code Ryan

1
Your Complete Guide To Middleware In Next.js 15 10:47

7 weeks ago10:47

10:47

Middleware Docs: https://nextjs.org/docs/app/building-your-application/routing/middleware

Code Ryan

1
Prevent This Race Condition In React.js 8:36

7 weeks ago8:36

8:36

Docs: https://react.dev/learn/you-might-not-need-an-effect#subscribing-to-an-external-store

Code Ryan

1
This Is A Core Concept To Understand About React.js 5:43

8 weeks ago5:43

5:43

Docs: https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes

Code Ryan

1
Your Guide To Parallel Routes In Next.js 15 10:24

9 weeks ago10:24

10:24

Parallel Routes Docs: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#loading-and-error-ui

Code Ryan

1
How To Stop Running Code Twice In React.js 4:26

9 weeks ago4:26

4:26

Today I cover an issue you might run into with running code multiple times in React -- especially when running initialization code -- and how React thinks you should solve it Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

Code Ryan

1
Did You Know This Advanced Routing Technique In Next.js? 7:31

10 weeks ago7:31

7:31

Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

Code Ryan

1
Are You Messing This Up In React.js? 5:07

10 weeks ago5:07

5:07

Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

Code Ryan

1
Pros Know How To Do This In Next.js 15 6:39

11 weeks ago6:39

6:39

Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

Code Ryan

1
Even Pros Make This React.js Mistake 6:27

11 weeks ago6:27

6:27

Docs: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

Code Ryan

1
Pro Next.js Developers Know How To Do This 6:17

12 weeks ago6:17

6:17

Route Groups Code: https://nextjs.org/docs/app/building-your-application/routing/route-groups

Code Ryan

1
This Can Be A Problem In React.js.. 4:46

12 weeks ago4:46

4:46

Docs: https://react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes

Code Ryan

1
A Core Next.js Fundamental You Need To Know About 2:58

13 weeks ago2:58

2:58

Docs: https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware

Code Ryan

1
Senior Developers Don't Make This Mistake 4:08

13 weeks ago4:08

4:08

Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

Code Ryan

1
This Is A Beginner Mistake You Should Avoid (Client-side Routing) 6:31

14 weeks ago6:31

6:31

Docs: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-to-top

Code Ryan

1
2 Mistakes Pro React Developers Don't Make 9:04

14 weeks ago9:04

9:04

Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

Code Ryan

1
Did You Know How To Do This In Next.js 15? 4:08

15 weeks ago4:08

4:08

Learn how to use the redirect and permanenetRedirect functions in Next.js -- https://nextjs.org/docs/app/building-your-application/routing/redirecting#redirect-function

Code Ryan

1
How To Actually Use The useEffect Hook In Modern React.js 12:48

15 weeks ago12:48

12:48

Docs: https://react.dev/learn/synchronizing-with-effects

Code Ryan

1
Unlock PRO UX with Streaming Web Components in Next.js 6:56

16 weeks ago6:56

6:56

Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense

Code Ryan

1
3 Key Concepts Professional React Developers Master 8:58

16 weeks ago8:58

8:58

Docs: https://react.dev/learn/synchronizing-with-effects

Code Ryan

1
The Right Way To Handle Instant Loading States In Next.js 15 4:39

17 weeks ago4:39

4:39

Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Code Ryan

1
Correctly Using Refs With DOM Elements In React.js 7:09

17 weeks ago7:09

7:09

https://react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs

Code Ryan

1
Next.js 15 Error Handling Mastery 8:31

18 weeks ago8:31

8:31

Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions

Code Ryan

1
What Are Refs In React.js, Really? Why? 10:29

18 weeks ago10:29

10:29

https://react.dev/learn/referencing-values-with-refs#recap

Code Ryan

1
PRO Next.js 15 Error Handling - Expected Errors 7:09

19 weeks ago7:09

7:09

Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling

Code Ryan

1
Optimize Client Side Navigation In Next.js 15 9:05

20 weeks ago9:05

9:05

Docs: https://nextjs.org/docs/app/api-reference/functions/use-router

Code Ryan

1
Actually Understanding Context In React.js 18:04

20 weeks ago18:04

18:04

Docs: https://react.dev/learn/passing-data-deeply-with-context Starter Project: https://github.com/coderyansolomon/react-context

Code Ryan

1
The Recommended Way To Link In Next.js 15 10:10

21 weeks ago10:10

10:10

Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating Link API - https://nextjs.org/docs/app/api-reference/components/link

Code Ryan

1
Avoid This Problem In React.js - Prop Drilling 6:12

21 weeks ago6:12

6:12

Docs: https://react.dev/learn/passing-data-deeply-with-context

Code Ryan

1
Are Templates Better Than Layouts In Next.js? 6:20

22 weeks ago6:20

6:20

Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#templates

Code Ryan

1
The Only useReducer Video You Need 24:21

22 weeks ago24:21

24:21

Docs: https://react.dev/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer

Code Ryan

1
How To Use Layouts Correctly In Next.js 15 12:30

23 weeks ago12:30

12:30

Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates

Code Ryan

1
Master React State By Solving This Problem 5:26

23 weeks ago5:26

5:26

Today, I discuss the problem of state not being reset when rendering the same component in the same position within the React tree. Read more about this here: https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position

Code Ryan

1
How Pages Really Work In Next.js 15 6:52

24 weeks ago6:52

6:52

Today, I give a brief overview of how pages work in Next.js 15 and a few important things to know regarding pages. Learn more from the Next.js docs here: https://nextjs.org/docs/app/building-your-application/routing/pages

Code Ryan

1
The Wrong Way To Manage State In React.js 5:30

24 weeks ago5:30

5:30

Today, I cover having a single source of truth in your React application's state. Docs: https://react.dev/learn/sharing-state-between-components#a-single-source-of-truth-for-each-state

Code Ryan

1
A Next.js Fundamental You Need To Master 13:18

25 weeks ago13:18

13:18

Learn how to define routes in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Code Ryan

1
This Is A Common Misconception In React.js 9:19

25 weeks ago9:19

9:19

Docs: https://react.dev/learn/preserving-and-resetting-state#

Code Ryan

1
This Is A Breaking Change For Next.js 15 4:06

26 weeks ago4:06

4:06

Today, I cover the change from sync to async apis in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/upgrading/version-15

Code Ryan

1
A Fundamental React.js Concept - Lifting State 9:33

26 weeks ago9:33

9:33

Today, I discuss what it means to lift state in React.js and show you an example of how this might be done.

Code Ryan

1
This Is How To Structure State In React.js 11:19

27 weeks ago11:19

11:19

Today, I cover 5 principles of structuring state in your React applications. Docs: https://react.dev/learn/choosing-the-state-structure#

Code Ryan

1
The Top 3 Next.js 15 Project Organization Strategies 9:07

27 weeks ago9:07

9:07

Today, I discuss a few solid options for organizing your Next.js projects. Docs: https://nextjs.org/docs/canary/app/building-your-application/routing/colocation#project-organization-strategies

Code Ryan

1
NEW Next.js 15 Feature! Enhanced Forms 7:51

28 weeks ago7:51

7:51

Today, I show you a cool new feature of Next.js 15 forms: Client Side Navigation

Code Ryan

1
The Modern Guide To Using State In React.js 17:22

28 weeks ago17:22

17:22

I show you a step by step process for how to think about using state in React.js

Code Ryan

1
I Really Didn't Understand This.. 11:27

29 weeks ago11:27

11:27

Today, I discuss declarative vs imperative programming in the context of React.js and why it matters.

Code Ryan

1
A Developer Lesson Learned The Hard Way 5:14

29 weeks ago5:14

5:14

As a web developer, it can be easy to just push a PR without considering how you can make things more maintainable and extendable in the long run.

Code Ryan

1
This Is A Bad Idea In React.js 12:27

30 weeks ago12:27

12:27

Today, I show some examples of mistakes you can make (bad ideas) when working with arrays in React.js state

Code Ryan

1
This Is A New Helpful Feature In Next.js 15 6:13

30 weeks ago6:13

6:13

Today, I cover what the status indicator means in your Next.js application as well as giving you a refresher on static vs dynamic rendering. Docs: https://nextjs.org/docs/app/api-reference/next-config-js/devIndicators#appisrstatus-static-indicator

Code Ryan

1
Doing This Is A Bad Idea In Your React Apps 11:55

31 weeks ago11:55