My Nextjs replacement , Rakkasjs is an underdog in the react meta-framework landscape that checks all the boxes i care about .
Nextjs is cool but it's webpack can get aggressive with systemm resources especially on windows machines , they have a replacement written in rust but i barely noticed a difference when i tried it maybe it's because it's still beta .
vite on the other hand amazes me in how good the dev experience is, their latest release is even more impressive
To fetch the lsitsing to show on initial load we'll use
typescript
1const{ data, refetch }=useServerSideQuery(
2()=>returngetPbListings(params);
3{
4 refetchOnWindowFocus:true,
5 refetchOnReconnect:true,
6}
7);
useServerSideQuery (useSSQ for short) is Rakkas's novel data fetching solution. You can think of it as Next.js's getServerSideProps on steroids. It lets you write code as if the server-client barrier didn't exist: You can call filesystem APIs, perform database queries, or call third-party APIs that require private keys or have CORS disabled. You can put any type of server-side code right in your component. Rakkas will strip this server-side code and its imports from the client bundle.
Like useQuery, useSSQ takes a query function. When it's executed on the server, the query function is called directly. But when it's executed on the client, Rakkas serializes all the values used in the query function body and sends them to the server. The server then deserializes the values, runs the query function, and serializes the return value to be sent back to the client. Unlike getServerSideProps, it can be used in any React component, not just pages. It also provides type inference.
as for loading states
All Rakkas data fetching methods use Suspense. You can handle loading states by wrapping parts of your component tree in Suspense and providing fallbacks
rakkas currently doesn't have an Image component but i hacked a basic one together for this project and got good enough lighthouse scores with it GoodImage.tsx
am using pocketbase which will lazily generate thumbnails for images uploaded on request which you can use as the fallback before the higher quality image loads
dynamic routes
after loading our listings we'd want to view each one individially , so we define a dynamic route
file structure
and we'll fetch this listing by ID based on the param passed in
13thrownewError("Invalid request , params.id must be of type string");
14}
15returngetPbListings(par_ams);
16},
17{
18 refetchOnWindowFocus:true,
19 refetchOnReconnect:true,
20}
21);
22// retun JSX here
23}
also notice how we have to validate the types of the params being sent to the fetcher function which will run on the server
auth guards
And we might also want an admin only page to facilitate adding new listings and updating the listings status after they're off the market which is where rakkas auth guards come in
add a $guard.ts to the admin directory 
to mark it off limits to unauthed users and redirect them to the login oage instead . rakkas has alot of middleware like this for even deeper customization
Now we deploy by following the instructions on the respective deployment strategy listed , for example vercel requires an adapter
bash
1npm install -S @hattip/vercel-edge
and a vite config adjusument
typescript
1import{ defineConfig }from"vite";
2import rakkas from"rakkasjs/vite-plugin";
3import tsconfigPaths from"vite-tsconfig-paths";
4
5exportdefaultdefineConfig({
6 plugins:[
7tsconfigPaths(),
8rakkas({
9 adapter:"vercel",// or "vercel-edge"
10}),
11],
12 server:{
13 host:true,
14},
15});
16
After building with rakkas build, you can deploy with vercel deploy --prebuilt.
⚠ Vercel/netlify serveless functions don't have response streaming yet , but with vercel implementing thier own version an AWS lambda adding them officially it's goig to be added soon to rakkas so that we can enjoy the perks of react streaming on vercel/netlify non-edge platforms
⚠ Another thing to look out for is react-icons imports , where i've noticed it cause an issueif it doesnt end with index.js
import { FaPhone, FaWhatsapp, FaEnvelope } from "react-icons/fa/index.js"; instead of import { FaPhone, FaWhatsapp, FaEnvelope } from "react-icons/fa";
helpfull resources : i asked a few quertons to the mantainer on their discussions and you might find the responeses helpful too
btw , hosting it on vercel fixed the uncompressed text and cimage caching headers errors , if you go the NodeJS/Bun way you might need to configure nginx,caddy or similar
