#In which cases are documents rendered server side with loader data?

1 messages · Page 1 of 1 (latest)

untold cedar
#

I'm making my way through the Remix Singles playlist to actually grasp the data loading/mutation API offered by Remix, and I'm a little confused.

I thought whenever we use any loader data from useLoaderData, the required data is fetched server-side and we get fully-formed documents. But in this Remix Single (https://www.youtube.com/watch?v=NXqEP_PsPNc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6), we see that there's actually a network request sent for loader data, and later somehow when we refresh the page it's all server-rendered and no network request is made.

How do I form the correct mental model for which situations we're server-rendering things, vs. ones where we are rendering client-side?

YouTube
Remix
Remix Single: Loading data into components

The first thing you usually need for any route is a way to load data from the server. Remix makes it easy with loaders.

Learn more at https://remix.run/docs

▶ Play video
wanton aurora
#

If I got the mental model right it's server-rendering for the initial request. From that point on, client-side routing is happening so the data is dynamically fetched and rendered. Well, if you have <Scripts> included, that is. Otherwise it's all server rendered 😄

#

That's also the reason you see auth validation in all loaders. Client-side routing only replaces parts of the interface, so each Outlet needs to re-confirm it actually still has a valid user. Only that part of the UI is "replaced".

untold cedar
#

Oh, right! This fits in with the idea that on actions like form submissions, our route loaders are run again in case any data was updated/created/deleted (this is what a mutation is, right?)

wanton aurora
#

Exactly.

untold cedar
#

Thank you for SUCH a quick response! Really grateful for such an active community here.

remote hazel
#

when the user first access a URL it receives a document response, this is all loaders run and the routes are rendered server-side to HTML

once the JS loads and React hydrates your app, then Remix start using fetch to get the loaders data it needs based on different cases

  • on a navigation it fetches the new routes loaders (e.g. from /posts/1 to /posts/2 it only fetch the loader of 2 not the loader of posts)
  • on a form submit it uses fetch to POST to the action, then it fetches the loaders of the routes to revalidate the data