React Rendering Mechanisms

Overview

How does Pre-Rendering work?

Advantages of Pre-Rendering

• Search engine optimization (SEO), shareability
• Performance (especially as perceived)

React Router can be used in two different modes:

Structure of the new setup

Folder structure

app/root.tsx

app/routes.ts

react-router.config.ts

NPM scripts (package.json)

Routing in Framework Mode

General conventions

• Routes are configured in a routes.ts file
• Each route has two required parts: a URL pattern to match the URL, and a file path to the route module that defines its behavior.
• The react component to be rendered on that route must be the default export of that js module.

index() indicates an index route

→ URLs / and /concerts

Static route segments

→ e.g. /about and/concerts/trending

Routes can be nested inside parent routes (e.g. layout,route).

→ URLs /login (layouts don't add any segments to the URL)

Dynamic route segments (parameters) start with :

→ e.g. /concerts/schlieren

• See React router docs for more details.
• Check the Remix docs for ideas on how to structure the files referenced in the router.

Loaders

Loaders

• Single, optional loader per route (export loader)
• Run on the server (only)
• Define a HTTP endpoint: request → response
• Result either serverside rendered and hydrated or fetched pre rendering
• useLoaderData or loaderData props-field to access response data in component

blog.$slug.tsx

Modifying the HTTP response

Modifying the HTTP response

Return a Response object…

Modifying the HTTP response

…or throw it!

Exercise

Checkout SSR Samplecode and analyze

1. Use the sample branch for chapter 10
2. Use the dev tools network tab do analyze what is being fetched from the server. Use a prod build: npm run build && npm run start
3. Stretch goal: Explore the <Link prefetch=""> attribute in PokeListEntry.tsx
4. Stretch goal: Transform the data from the PokeAPI so that only the needed data is sent to the client

Insights

initial page load

consecutive page loads

Stretch goal: link prefetch option

Stretch goal: optimize data fetching

pages/list/ListPage.tsx

Results in less data sent around

Additional framework mode features

How can we redirect to a different route?

E.g. / → /blog

How can we redirect to a different route?

E.g. / → /blog

Other Useful Route Module Exports

Creating a form

blog.$slug.tsx

Let's start simple: We can use a native HTML form.

blog.$slug.tsx

On the server the form is processed by an action.

blog.$slug.tsx

Form data is read from the request using the standard Request.formData() method.

blog.$slug.tsx

The data can then be processed as desired (validated, stored, etc.).

blog.$slug.tsx

Like the loader, the action function can return a Response object.
Typically, a redirect is returned to implement the Post/Redirect/Get pattern.

blog.$slug.tsx

What will happen when the user clicks the Submit button?

→ It works! But it does a full document request: POST /blog/…

blog.$slug.tsx

The React-Router Form component together with the clientAction brings the expected SPA behavior

It still has the native form behavior as long as JS has not loaded yet.
→ Progressive Enhancement

blog.$slug.tsx

The React-Router allows to access the generated types for typesafety on this level.

It also provides typse for actions and clientActions!

Exercise

Checkout SSR Samplecode and analyze

1. Use the sample branch for chapter 10
2. Analyze what happens in the network tab upon submitting the form npm run build && npm run start
3. Disable Javascript in the browser dev tools and analyze the behavior CTRL|CMD + SHIFT + P -> 'disable javascript'
4. Stretch goal: think how you would go about validation while not breaking the progressive enhancement.

Insights

Progressive enhancement

1. A full page navigation is happening, the server state updated and a fully rendered page returned. The PokeVisit count is lost.
2. With javascript enabled the pasting from clipboard still works
3. Without javascript, the clipboard and pokecount is lost. Core functionality still works.
4. On client side navigation, the layout data is synced (update the profile in a separate tab)

Stretch goal: Thoughts about validation

1. Have all critical validation within the action for security reasons
2. Either enhance with HTML5 validation attribute for better UX
3. Or use in addition the clientAction to perform validation before submitting for improved UX.