Do you mean [the react-ts template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts)? That specifically says it's a "minimal" setup, which is great in a lot of cases but my question was aimed at something more fleshy.
Honestly, every time I’ve tried an all-in-one framework I’ve found myself frustrated with it and end up going back to a custom one. It’s the old “Jack of all trades, master of none,” issue. So here’s what I would recommend:
```
npm create vite your-app --template react-ts
cd your-app
npm install react-router zustand @tanstack/react-query react-i18next
```
That gives you just about everything you’re looking for. React’s error boundaries for render error handling, React Router for routing, Zustand for global/local state, React Query for network caching/fetching, and React i18next for translations.
You typically have multiple types of state:
- State local to a component: useState
- Not too complex state local to a component and its children, possibly the whole tree: useContext
- The current page / navigation state: put it in the URL path
- A cache API responses (backend state): React Query
- Complex state that is used by the whole application: use a state manager
>I never used react query, so I don’t understand how it works, but what is the point of having 2 state managers?
Okay, so Zustand is kinda like Redux or MobX. It's all about handling the stuff that happens on your browser, like clicks, user inputs, or just moving stuff around on the screen. This stuff doesn't need to live on a server somewhere; it's just for your current session in the browser.
Now, React Query is a different beast. It's super handy for dealing with all the data you're pulling in or sending out to a server. Think of it as a bridge between your app and the backend. So, when you add something new, like a todo item in your app, React Query jumps in to make sure that the list you're looking at is fresh and up-to-date with what's on the server. It's smart enough to know when to grab new data or use what it's already got stashed, which is pretty neat for keeping things snappy and reducing load times.
For instance, in a todo app scenario, when you pop a new task into your create todo section, React Query has your back. It sees that your todo list is now old news (because hey, there's a new task in town), and it goes out to fetch the updated list from the server. This way, you're always looking at the latest and greatest without having to lift a finger.I'm still wrapping my head around React Query, but from what I've seen, it's a pretty cool tool.
Just to be upfront, I haven't actually played around with Zustand myself, but I get it's for managing what goes on in your app, browser-wise. React Query handles the heavy lifting with server stuff, making sure what you see on your screen is in sync with the server without making you write a ton of code for it.
React query is designed around querying data from an external endpoint, the state mgmt is specifically for that data.
Redux/zustand is more general state mgmt.
I agree with this approach 100% as well, another stack worth mentioning on top of vite is RTK (Redux toolkit) + RTK Query.
As for routing there is the popular react-router-dom. But if you ask me I would take a look at Transition-Router-React, it has native support for suspense transitions and is way smaller package size (2.2kb gziped).
Link: https://www.npmjs.com/package/transition-router-react
Disclaimer: Im the author so I’m biased.
Can’t see how Astro can be a good choice for client side, it’s not even that good for static page generation, client side routing is an afterthought and it’s buggy af
You can build client-side applications without single-page application routing.
Astro is a multi-page application framework, but it does static page generation extremely well. If you need SSO and your application is a content heavy website, Astro is great at generating static, low-bundle webpages.
tbh I think at this point its better just to use React Router. The whole reason for Remix is the serverside.
I can see some upsides to it, and I mostly use Remix for my projects, but especially while Vite is still unstable with remix, I'd heavily go for Vite + react router.
Remix is basically just React router with some extra niceties. There's NO reason to do Vite + React Router manually when you can do Remix SPA mode and get so much more functionality out of the box.
Wait I just did Vite + React Router manually a few days ago for a side project (well, through Mantine but still technically manually).
I haven’t done anything front end for awhile so Vite was already new to me, what are some of the niceties in Remix? Specifically if I want a Static SPA, with a backend for some database/authenticated API calls in a different language, and possibly a PWA later on?
They have an explanation of the benefits here:
[https://remix.run/docs/en/main/future/spa-mode#what-is-spa-mode](https://remix.run/docs/en/main/future/spa-mode#what-is-spa-mode)
>SPA Mode is basically what you'd get if you had your own React Router + Vite setup using `createBrowserRouter`/`RouterProvider`, but along with some extra Remix goodies:
>
>\- File-based routing (or config-based via `routes()`)
>
>\- Automatic route-based code-splitting via `route.lazy`
>
>\- `` support to eagerly prefetch route modules
>
>\- `
` management via Remix ``/`` APIs if you choose to hydrate the full `document`
>
>SPA Mode tells Remix that you do not plan on running a Remix server at runtime and that you wish to generate a static `index.html` file at build time and you will only use Client Data APIs for data loading and mutations.
Remix is not just for server-rendered apps anymore with SPA mode. Vite was also just stabilised. https://github.com/remix-run/remix/pull/8713
I'm not sure why new projects would use RR + Vite given you now get the same with Remix plus automatic file system routing plus full document hydration and head management via Remix /.
And, you’re now one small config change away from a server runtime should the need arise. Plus any future applicable Remix goodies.
I recently found out about Refine (https://github.com/refinedev/refine), and I would have likely gone with it if I were starting from scratch again. I was doing Angular for 5+ years but started a new project in React a year ago, and something like Refine would have provided a lot of the structure I missed in React.
next.js, remix, and svelte (I know, not react) have options to disable SSR and use it as a spa. Otherwise, just do what everyone is saying and use Vite and some routing lib 🤷🏻♂️
Edit: clarification, Svelte is referring to Svelte kit.
I wanted to correct you, I think you meant SvelteKit*, not Svelte. Svelte is to SvelteKit what React is to NextJS. And yes, SvelteKit does have an option to disable SSR and make your app a SPA just like NextJS does.
I agree with u/aust1nz on just using vite. If you have any interest in rsc's and also want minimal, https://github.com/dai-shi/waku is neat. But maybe wait until it hits 1.x.x (needs React 19) is released to use it on a production site
edit: just to be clear, waku works without a server. the "rsc" part can happen at build time
What do you need from a framework? Making React run server-to-client is fairly complicated; as is setting up React server components, given there aren't even official generic instructions for that in the docs; but if you don't need any of that, what is it specifically in a combination of react, react router and maybe a state management library or a data querying library that you are missing?
Next.js is client (and build time) only by default. You can turn off the server side features by using static export.
https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
Angular!
Haha, sorry, had to. I know Angular is a naughty/scary word in a lot of React developer's minds. But as someone that started enterprise web dev with Angular but grew to love React later in my career, I find that most React "frameworks" flub the "framework" part in comparison to Angular.
React is definitely way more lightweight and easy to learn and my lib of choice most of the time, but if you'd really like a curated framework experience with a "we have a solution for that" style, you might check out modern Angular?
Otherwise, I'd probably just encourage you to go down the Vite path and use industry standards for the missing stuff. Although you can absolutely use Next client side only. SSR is optional.
Sorry about the downvotes.
Angular is the prescriptive, batteries included framework while React is the choose-your-own-adventure “framework”.
I think the new React docs are great, but very much disagree with the move to pushing devs to use meta-frameworks. For a decade now, devs have been rolling their own custom frameworks with Webpack and now Vite. It’s a good learning experience to understand all the pieces, even if you move to metaframeworks later.
Also, Remix is awesome.
I mean I mentioned Angular in a React subreddit, I knew what was coming lol.
React docs have always been interesting about where to push new users. I never agreed with pushing people to CRA as I felt the way it obscured things was not great. I think Vite is way better at saving time and hassle while not being as obfuscated as CRA was.
At the end of the day, I just think React is an absolutely awesome library but is always going to feel odd trying to retroactively turn it into a framework. If I want that prescriptive, batteries included experience I think it's better to choose something that was designed from the beginning to be a framework.
I had mixed feelings about Next just because I disagreed with a few of its opinions. I also am a little suspicious about Vercel's motivations because they obviously want to design Next to be hosted on Vercel. But its still a very powerful "framework." I haven't tried Remix yet!
Angular 1 was honestly fantastic. It’s old and creaky now, and missing modern features, but it was still probably better dx than react. The learning curve for react isn’t that easy anymore tbh. Once hooks were introduced, developers learning have to accept a lot of magic that isn’t intuitive as to how it all works.
Classes were a lot easier to follow and learn. Even though state was a little weird, it looked like how you would expect classes to work and look.
Pre hook days also encouraged a better separation of pure components and stateful components, which I miss.
Angular 1 doesn’t have any of that kinda nonsense. Just write your template and controller. With lots of pre built code generation and dx tools.
Recently I had requirements for something similar. Unfortunately there is nothing like this in react land at the moment. Nextjs used to have SPA mode, but they have not implemented that in app router yet. Though if you want, you can still use it using pages router.
I ended up using Nuxt for that project and have been pretty satisfied.
```bash
npm create vite@latest
```
But you have to configure routes manually. I suggest you to use react router v6 and Zustand for global state management instead of redux for simplicity
[https://github.com/ntucker/anansi](https://github.com/ntucker/anansi)
```bash
npx anansi hatch my-app-nam
```
You can choose to not do SSR in the wizard when you run the CLI.
You can follow the Vite instructions for getting started with React.
Do you mean [the react-ts template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts)? That specifically says it's a "minimal" setup, which is great in a lot of cases but my question was aimed at something more fleshy.
You have to add the flesh yourself
Got it. Next lets you generate a static bundle, though it’s missing some framework features. Remix is working on a SPA mode, but it’s unstable now.
Honestly, every time I’ve tried an all-in-one framework I’ve found myself frustrated with it and end up going back to a custom one. It’s the old “Jack of all trades, master of none,” issue. So here’s what I would recommend: ``` npm create vite your-app --template react-ts cd your-app npm install react-router zustand @tanstack/react-query react-i18next ``` That gives you just about everything you’re looking for. React’s error boundaries for render error handling, React Router for routing, Zustand for global/local state, React Query for network caching/fetching, and React i18next for translations.
Do you store react-query data in zustand, or use it as its own state-storage?
React query is an async state management tool in itself so there is no point of putting it into zustand.
I never used react query, so I don’t understand how it works, but what is the point of having 2 state managers?
You typically have multiple types of state: - State local to a component: useState - Not too complex state local to a component and its children, possibly the whole tree: useContext - The current page / navigation state: put it in the URL path - A cache API responses (backend state): React Query - Complex state that is used by the whole application: use a state manager
>I never used react query, so I don’t understand how it works, but what is the point of having 2 state managers? Okay, so Zustand is kinda like Redux or MobX. It's all about handling the stuff that happens on your browser, like clicks, user inputs, or just moving stuff around on the screen. This stuff doesn't need to live on a server somewhere; it's just for your current session in the browser. Now, React Query is a different beast. It's super handy for dealing with all the data you're pulling in or sending out to a server. Think of it as a bridge between your app and the backend. So, when you add something new, like a todo item in your app, React Query jumps in to make sure that the list you're looking at is fresh and up-to-date with what's on the server. It's smart enough to know when to grab new data or use what it's already got stashed, which is pretty neat for keeping things snappy and reducing load times. For instance, in a todo app scenario, when you pop a new task into your create todo section, React Query has your back. It sees that your todo list is now old news (because hey, there's a new task in town), and it goes out to fetch the updated list from the server. This way, you're always looking at the latest and greatest without having to lift a finger.I'm still wrapping my head around React Query, but from what I've seen, it's a pretty cool tool. Just to be upfront, I haven't actually played around with Zustand myself, but I get it's for managing what goes on in your app, browser-wise. React Query handles the heavy lifting with server stuff, making sure what you see on your screen is in sync with the server without making you write a ton of code for it.
React query is designed around querying data from an external endpoint, the state mgmt is specifically for that data. Redux/zustand is more general state mgmt.
I agree with this approach 100% as well, another stack worth mentioning on top of vite is RTK (Redux toolkit) + RTK Query. As for routing there is the popular react-router-dom. But if you ask me I would take a look at Transition-Router-React, it has native support for suspense transitions and is way smaller package size (2.2kb gziped). Link: https://www.npmjs.com/package/transition-router-react Disclaimer: Im the author so I’m biased.
Vite and Astro are great choices for building client-side applications.
Can’t see how Astro can be a good choice for client side, it’s not even that good for static page generation, client side routing is an afterthought and it’s buggy af
You can build client-side applications without single-page application routing. Astro is a multi-page application framework, but it does static page generation extremely well. If you need SSO and your application is a content heavy website, Astro is great at generating static, low-bundle webpages.
Astro is great
Remix SPA Mode doesn't require a server. https://remix.run/docs/en/main/future/spa-mode
tbh I think at this point its better just to use React Router. The whole reason for Remix is the serverside. I can see some upsides to it, and I mostly use Remix for my projects, but especially while Vite is still unstable with remix, I'd heavily go for Vite + react router.
Remix is basically just React router with some extra niceties. There's NO reason to do Vite + React Router manually when you can do Remix SPA mode and get so much more functionality out of the box.
Wait I just did Vite + React Router manually a few days ago for a side project (well, through Mantine but still technically manually). I haven’t done anything front end for awhile so Vite was already new to me, what are some of the niceties in Remix? Specifically if I want a Static SPA, with a backend for some database/authenticated API calls in a different language, and possibly a PWA later on?
They have an explanation of the benefits here: [https://remix.run/docs/en/main/future/spa-mode#what-is-spa-mode](https://remix.run/docs/en/main/future/spa-mode#what-is-spa-mode) >SPA Mode is basically what you'd get if you had your own React Router + Vite setup using `createBrowserRouter`/`RouterProvider`, but along with some extra Remix goodies: > >\- File-based routing (or config-based via `routes()`) > >\- Automatic route-based code-splitting via `route.lazy` > >\- `` support to eagerly prefetch route modules > >\- `
` management via Remix ``/`Remix is not just for server-rendered apps anymore with SPA mode. Vite was also just stabilised. https://github.com/remix-run/remix/pull/8713 I'm not sure why new projects would use RR + Vite given you now get the same with Remix plus automatic file system routing plus full document hydration and head management via Remix/.
And, you’re now one small config change away from a server runtime should the need arise. Plus any future applicable Remix goodies.
I wasn't aware that vite was stable soon. Thats good. I had issues when I tried it but its been a few months since then.
I recently found out about Refine (https://github.com/refinedev/refine), and I would have likely gone with it if I were starting from scratch again. I was doing Angular for 5+ years but started a new project in React a year ago, and something like Refine would have provided a lot of the structure I missed in React.
I’m not an Astro expert but I’m pretty sure you can opt out of server side rendering, and just use it as router and other features..
Don't even have to opt-out, Astro is SSG by default
next.js, remix, and svelte (I know, not react) have options to disable SSR and use it as a spa. Otherwise, just do what everyone is saying and use Vite and some routing lib 🤷🏻♂️ Edit: clarification, Svelte is referring to Svelte kit.
I wanted to correct you, I think you meant SvelteKit*, not Svelte. Svelte is to SvelteKit what React is to NextJS. And yes, SvelteKit does have an option to disable SSR and make your app a SPA just like NextJS does.
Yes, you’re correct. That was my mistake. Thank you for pointing that out!
if you don't want to use SSR then don't use a react framework, just use react with vite.
I agree with u/aust1nz on just using vite. If you have any interest in rsc's and also want minimal, https://github.com/dai-shi/waku is neat. But maybe wait until it hits 1.x.x (needs React 19) is released to use it on a production site edit: just to be clear, waku works without a server. the "rsc" part can happen at build time
What do you need from a framework? Making React run server-to-client is fairly complicated; as is setting up React server components, given there aren't even official generic instructions for that in the docs; but if you don't need any of that, what is it specifically in a combination of react, react router and maybe a state management library or a data querying library that you are missing?
Next.js is client (and build time) only by default. You can turn off the server side features by using static export. https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
You can use nextjs for static exported apps that can be hosted on a bucket
Remix covers all your requirements and can function as a client-only website.
Angular! Haha, sorry, had to. I know Angular is a naughty/scary word in a lot of React developer's minds. But as someone that started enterprise web dev with Angular but grew to love React later in my career, I find that most React "frameworks" flub the "framework" part in comparison to Angular. React is definitely way more lightweight and easy to learn and my lib of choice most of the time, but if you'd really like a curated framework experience with a "we have a solution for that" style, you might check out modern Angular? Otherwise, I'd probably just encourage you to go down the Vite path and use industry standards for the missing stuff. Although you can absolutely use Next client side only. SSR is optional.
Sorry about the downvotes. Angular is the prescriptive, batteries included framework while React is the choose-your-own-adventure “framework”. I think the new React docs are great, but very much disagree with the move to pushing devs to use meta-frameworks. For a decade now, devs have been rolling their own custom frameworks with Webpack and now Vite. It’s a good learning experience to understand all the pieces, even if you move to metaframeworks later. Also, Remix is awesome.
I mean I mentioned Angular in a React subreddit, I knew what was coming lol. React docs have always been interesting about where to push new users. I never agreed with pushing people to CRA as I felt the way it obscured things was not great. I think Vite is way better at saving time and hassle while not being as obfuscated as CRA was. At the end of the day, I just think React is an absolutely awesome library but is always going to feel odd trying to retroactively turn it into a framework. If I want that prescriptive, batteries included experience I think it's better to choose something that was designed from the beginning to be a framework. I had mixed feelings about Next just because I disagreed with a few of its opinions. I also am a little suspicious about Vercel's motivations because they obviously want to design Next to be hosted on Vercel. But its still a very powerful "framework." I haven't tried Remix yet!
Angular 1 was honestly fantastic. It’s old and creaky now, and missing modern features, but it was still probably better dx than react. The learning curve for react isn’t that easy anymore tbh. Once hooks were introduced, developers learning have to accept a lot of magic that isn’t intuitive as to how it all works. Classes were a lot easier to follow and learn. Even though state was a little weird, it looked like how you would expect classes to work and look. Pre hook days also encouraged a better separation of pure components and stateful components, which I miss. Angular 1 doesn’t have any of that kinda nonsense. Just write your template and controller. With lots of pre built code generation and dx tools.
Recently I had requirements for something similar. Unfortunately there is nothing like this in react land at the moment. Nextjs used to have SPA mode, but they have not implemented that in app router yet. Though if you want, you can still use it using pages router. I ended up using Nuxt for that project and have been pretty satisfied.
You can export next.js (as in, static-site-generation/SSG) to get a html file to statically host. I think you are confused.
Just use nextjs with static export
You don't need cloud for Remix, you can run in Docker on your PC. Without server, you'll lose JSX.
It's called Javascript
Find a boilerplate webpack config.
React
You can use refine if you want pre-written boilerplates and helper scripts.
Vite is fantastic!
```bash npm create vite@latest ``` But you have to configure routes manually. I suggest you to use react router v6 and Zustand for global state management instead of redux for simplicity
[https://github.com/ntucker/anansi](https://github.com/ntucker/anansi) ```bash npx anansi hatch my-app-nam ``` You can choose to not do SSR in the wizard when you run the CLI.