Nostalgie is an opinionated, full-stack, runtime-agnostic framework for building web apps and web pages using react.
npx create-nostalgie-app my-appTry it. You're less than 30 seconds away from that feeling you thought you had lost forever.
Nostalgie is opinionated so that you don't have to be.
Nostalgie focuses on areas that are critical to every modern web. It makes a bet on leading technologies in each category. In having these opinions and in making these choices, Nostalgie provides a tightly integrated, highly-productive environment to get @#$% done.
// Manage your `<head>` tags, and get the full benefit
// of SEO-friendly, server-side rendering
import { Markup } from 'nostalgie/markup';
// Your app lives on the web right? We've got you covered
// with a full solution for routing.
import { Link, Redirect, Router } from 'nostalgie/routing';
// Love Tailwind? We do too. It just works. Oh, you don't? Well
// we've got you covered with a familiar styled component API.
import { styled } from 'nostalgie/styling';Calling APIs and server-side logic is unnecessarily painful. It doesn't have to be.
Nostalgie automatically wires your server-side functions to your client-side hooks with typing, authentication, caching and deduplication. You may even realize that you don't need complex state management anymore.
Server
import type { ServerFunctionContext } from 'nostalgie/functions';
export async function whoami(ctx: ServerFunctionContext) {
if (!ctx.auth.isAuthenticated) {
return "I don't know!";
}
return `You're: ${ctx.auth.credentials.user.name}`;
}Browser
import { useQueryFunction } from 'nostalgie/functions';
import * as React from 'react';
import { whoami } from './serverFunction';
export function UserPanel() {
const whoamiResult = useQueryFunction(whoami, []);
return <div>{whoamiResult.isSuccess ? whoamiResult.data : 'Loading...'}</div>;
}Nostalgie has you covered for the critical parts of your app.
There are a few things that almost every app needs but that are hard and repetitive. It's a lot of work to do these things well and while you're struggling with them, you're not building your app. Nostalgie frees you from this burden so that you get get on innovating and delivering value.
Your app lives on the web and the web works with URLs. Nostalgie has you covered.
Easy and idiomatic code splitting. You use React.lazy and we handle the rest. Ten layers of lazy components? No problem; these will render, fully hydrated in a single pass on the server.
Only the code needed by your users will be sent to them. Every bit of critical JavaScript and CSS will be preloaded. Waterfalls are beautiful but we don't want them in our web apps.
Sometimes you need to know who is using your app. You may even want to know who is using your app during server rendering. Nostalgie makes this easy:
You configure Nostalgie with any compliant OpenID provider and you're all set. You can log in users and know their identity and scopes whether you're in a Server Function or in a React component.
Wrap any component using the withAuthenticationRequired helper to restrict it to authorized users. With a fallback render prop, you can render an alternative for unauthorized users with an automatically-generated login url.
Getting the right information to all the right crawlers in React apps has never been easy. Nostalgie makes it easy.
head tagsNostalgie integrates with `react-helmet-async` so that you can tweak your top-level markup anywhere in the render tree. Five levels deep in lazy-loaded components? No problem.
Because of how Nostalgie does server-side rendering, your SEO tags will be rendered on the server no matter where you set them.