https://github.com/sergiocarneiro/99-remix
😎 Extensive list of awesome things you can do with Remix 💿
https://github.com/sergiocarneiro/99-remix
99-list lists resources
Last synced: 3 months ago
JSON representation
😎 Extensive list of awesome things you can do with Remix 💿
- Host: GitHub
- URL: https://github.com/sergiocarneiro/99-remix
- Owner: sergiocarneiro
- License: cc0-1.0
- Created: 2023-01-07T15:18:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T21:20:46.000Z (over 3 years ago)
- Last Synced: 2024-05-22T11:10:56.618Z (about 2 years ago)
- Topics: 99-list, lists, resources
- Homepage:
- Size: 9.77 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Data Fetching
Rendering
Resource Routes
Type Safety
# I just started this! 🚼
My goal is to provide a collection of practical and concise examples that showcase the different capabilities of Remix.
This started as a list for myself to summarize what I've learned. Over time, I'll be adding more content and increasing the specificity of the examples as I continue to learn and explore.
If that sounds interesting to you, please consider starring the repo and joining the discussions! ⭐️
# Data Fetching
## Server-Sent Events (SSE)
Send data from the server without the client requesting it.
Components just need to subscribe to an *event source* using a *hook* that links to a *resource route*.
# Rendering
## Static Routes
Remove client-side scripts from static pages with [useShouldHydrate](https://github.com/sergiodxa/remix-utils#useshouldhydrate) from remix-utils.
> Third-party scripts can still be loaded using [ExternalScripts](https://github.com/sergiodxa/remix-utils#externalscripts).
How-to
root.tsx
import { useShouldHydrate } from "remix-utils";
export function Document({ children })
{
let shouldHydrate = useShouldHydrate();
return (
...
{children}
{shouldHydrate && }
);
}
routes/some-path.tsx
// A. Static
export const handle = {
hydrate: false
};
// B. Conditional
export const handle = {
hydrate: (data: LoaderData) => {
// ...
}
};
# Resource Routes
Classic server endpoints that render no component.
## Content Generation
Generate all sorts of content based on data.
Types
### Image
For content delivery, processing, etc.
How-to
export async function loader({ params }: LoaderArgs) {
const { content, format } = await getImage(params.path);
return new Response(content, {
status: 200,
headers: {
"Content-Type": `image/${format}`,
},
});
}
### PDF
For reports, invoices, etc.
How-to
export async function loader({ params }: LoaderArgs) {
const report = await getReport(params.id);
const pdf = await generateReportPDF(report);
return new Response(pdf, {
status: 200,
headers: {
"Content-Type": "application/pdf",
},
});
}
### HTML
To provide markup in API endpoints, for widgets and other integrations.
How-to
export async function loader({ params }: LoaderArgs) {
const user = await getUser(params.id);
const { template } = await generateWidget(user);
return new Response(script, {
status: 200,
headers: {
"Content-Type": "text/html",
},
});
}
### CSS
To provide styles in API endpoints, for widgets and other integrations.
How-to
export async function loader({ params }: LoaderArgs) {
const user = await getUser(params.id);
const { styles } = await generateWidget(user);
return new Response(script, {
status: 200,
headers: {
"Content-Type": "text/css",
},
});
}
### Javascript
To provide scripts in API endpoints, for widgets and other integrations.
How-to
export async function loader({ params }: LoaderArgs) {
const user = await getUser(params.id);
const { script } = await generateWidget(user);
return new Response(script, {
status: 200,
headers: {
"Content-Type": "application/javascript",
},
});
}
## Webhooks
External services can send data to resource routes.
# Type Safety
## Cookies
Make cookies fully type-safe using a [Zod](https://zod.dev) schema.