Loaders · youhoc

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

youhoc

...

Loaders

Fetching data with Loaders in SSR and CSR

Up until this point, when working with data from an api or a file, we have been using the `useEffect` hook.

When working with server-rendered data, we don't want to use `useEffect` because we can now load the data on the server and send it to the client.

With useEffect at client-side rendering CSR, we would have to wait for the data to load before we can render the page, which can lead to a poor user experience.

With SSR, we define the loader above the function and the data that we return from the loader is passed to the component as props. This allows us to use the data in the component without having to wait for it to load.

⁠

Client Loaders

In addition to server loaders, we can also use client loaders, instead of `useEffect` to load data on the client.

So even if you are not using SSR, you can use client loaders.

So with React Router v7, there are not many cases where you would need to use `useEffect` to load data. You can use loaders instead.

You can see with client loaders, they work in a similar way.

In this example, the data is passed into the component as props. The difference is that the data is loaded on the client instead of the server.

This means that the data is loaded after the component is rendered.

We can also define a function called hydrateFallback , which will be rendered while the client loader is running.

So you can show a spinner or a loading message while the data is loading. This is similar to how we would use `useEffect`.

⁠

In the next lesson, we will start on the projects section of the website and we will fetch the projects from a file for now using loaders.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.