Learn React Router v7 - part 1 : Routing

Rendering Strategies

• SSR : rendering when your first-load the page, reload the page and navigating the page without JS enabled
• CSR : rendering in client (browser main thread)
• SSG : pre-rendering in build-phrase , mean the routes is statically built into .html file

loader

They are only called on the server when server rendering or during the build with pre-rendering.

clientLoader

Route has clientLoader and no loader , mean it's client only route (ssr : false). Mean the code inside the Route page component NOT run in server.

behavior of loaders

• Only loader is defined : it runs on server (ssr or fetch call from client)
• Only clientLoader is defined : it runs on client ( no ssr )
• Both defined:
  • loader is run on server (only ssr load)
  • clientLoader is run on client (the rest cases)

hydrating data

initial data of client state should equals to server state loader data, if not can cause hydrating error (something like : server return 99 but client use 100)

HydrateFallback

This is a fallback component the server return until clientLoader is finished (Skeleton)

action

Route actions allow server-side data mutations with automatic revalidation of all loader data on the page when called from <Form>, useFetcher, and useSubmit

behaviors of actions

• Only action is defined : it runs on server
• Only clientAction : it runs on client
• Both defined: except JS js disabled, it always run clientAction in client

bundling

• loader, action, "server" modules : only server bundle (no leak server code to client)
• all modules (except "client" modules return null) is bundled in server

Explicit routes

Using helper function to define routing structure:

• root : define 1 root route for all routes
• route : define a route , the third param is children nested routes (rendering in Outlet)
• layout : define layout component only
• index : default fallback for Outlet
• prefix : add path prefix without parent route