Remix is a framework for building server-rendered React websites. Server rendering can reduce data-transfer round trips and deliver a usable page sooner than a client-only approach, though the performance gain depends on implementing the site well. section 11.0
A defining design choice is that navigation and basic forms can work without browser JavaScript. Interactive client-only features, such as dialogs and menus, still need it. This makes Remix a useful fit when core website behavior should not depend on client-side scripting. section 11.2.2
A route can keep its server data work beside the React component that uses it:
- Name the route file for its URL parameter, as in `/app/routes/shop.$categoryId.jsx`. section 11.3.2
- Export a `loader` that reads `context.params.categoryId`, fetches the category, and returns it with `json`. section 11.3.2
- Read the returned data in the component with `useLoaderData()`. The comparable Next.js example instead passes data from `getServerSideProps` as component props. section 11.3.2
// This is the code in the file #1
// /app/routes/shop.$categoryId.jsx #1
export async function loader(context) { #2
const { categoryId } = context.params; #3
const category = await getCategoryData(categoryId);
if (!category) {
redirect("/"); #4
}
return json({ category }); #5
}
function Category() {
const { category } = useLoaderData(); #6
return (
<h1>This is the page for the {category.name} category</h1>
);
}
export default Category;
The category route puts parameter lookup, server-side loading, a missing-category redirect, and component data access in one focused example. section 11.3.2
Choosing a project scope
A weather app provides a comparison with Next.js: its front, country, and city pages require URL-based pages, server-loaded data, cookies, and an API for React-to-server interaction. For a larger independent challenge, build an expense tracker from a minimal application that initially offers only sign-up and login. section 11.3 section 12.0
