The loader → Page → action cycle
In most web frameworks, a page's server logic and its UI live in separate files — maybe separate folders, sometimes separate languages. React Router puts them all in one file.
Three exports, one file
?What are exports and imports?A route file can export three things:
loader— runs on the server before the page renders. Reads data from the database and passes it to the component.export default— the React component that renders the page. It receives the loader's data and shows it to the user.action— runs on the server when the user submits a form. Writes data to the database and can redirect or return a response.
The flow goes: loader fetches data → component renders it → user interacts → action handles the submission → loader runs again with fresh data.
export default component. In Gista.js, we always name it Page (or Layout for layout files) so the role is obvious at a glance.One file, both sides
The loader and action are server-only — they talk to the database and never ship to the browser. The Page component is what the user sees and interacts with. They're all in the same file, but the framework keeps the boundaries straight.
This is sometimes called isomorphic code — the same file contains logic for both the server and the client. Export a loader, and it stays on the server. Export a Page, and it becomes the UI. One file, both sides.
Why this matters
In older web development, you'd have a backend route file (handling the database), a template file (rendering HTML), and a frontend script (handling interactions) — three files for one page. React Router collapses that into one place. When you want to understand how a page works, you open one file.