Show HN: Hacker News clone using Remix and React

[clintonwoo]

Hi all, author here.

This project was a pleasure to do, Remix has very good developer experience. But further than that it's actually a really good way to develop applications, it's a mix of old meets new where the paradigm encourages you to take advantage of web standards for data fetching (forms, links, a tags).

And it turns out that it's actually an optimal way to develop simple or even complex web applications which can deploy in a number of runtime environments (including edge workers). So you can get an insanely fast website for users. Note that this project is not necessarily an optimal website implementation (since it copies Hacker News) but rather it's intended to be useful as a starting point or reference for your own projects!

You can read about some of the benefits of it on the project page linked.

By the way I'm currently available to work (if you email me at clinton.dannolfo @gmail!)

[ahmedfromtunis]

On my machines (desktop and smartphone), this implementation is noticeably faster than the real thing; or at least that's how I perceive it.

I never worked with, or even tried, React and such libraries but a bit surprised. The code in this version here must be much more complexe, and the server much smaller, yet (feels as if) it is faster.

Am I the only one experiencing this and surprised by it?

[alana99]

Yeah, it's due to client side routing. The tradeoff is slightly higher JS size on the first load (but it gets cached) then when performing navigations it's only needing to fetch the data required to render the page.

The alterative is an old school style web server that returns a new HTML file and page reload on every navigation which is higher download and runtime cost (which is how the real HN does it!). No criticism here as the site definitely works well regardless.

[cyral]

JS apps like this should be faster, since they are downloading the "shell" of the application once and simply rendering content from lightweight JSON data requests rather than requesting an entire HTML page and re-rendering it. (Which also requires the server to query and send back things the client already has, like your username and karma) Single page apps get a lot of hate here because they tend to end up as huge bloated applications (not that your typical website with ads and popups is any better), but it works great when done right.

[sergiodxa]

You're probably feeling it's faster because it's using <Link prefetch> on every link so everything is prefetched before you click the link (when you hover them) which makes the navigation almost instant once you click it.

[password4321]

Might even be a nanosecond faster if they could drop the request to ?_data=routes%2F__main that fires off on every click and returns {}.

[woah]

The difference in speed is likely due to the fact that for many actions, data is sent as json and then placed into html markup on the client using code that was downloaded once at the beginning. This probably results in a smaller payload.

[woah]

The author of this actually has a bunch of different HN clones with different JS tech:

https://news.ycombinator.com/from?site=github.com/clintonwoo

Might be fun to compare

[clintonwoo]

Thanks for pointing that out! To add some extra info, the demo's are running on https://remix.hnclone.win (this project) https://hnclone.win (nextjs/graphql project)

It's not necessarily an apples to apples comparison of web servers though, since the NextJS one is also using GraphQL which adds extra response time. The remix one is also running on fly.io instead of a regular VPS in middle america just to cope with extra HN traffic.

[benmccann]

Here's one built with Svelte: https://hn.svelte.dev/

It's not exactly an apples-to-apples comparison for a number of reasons including implementation and hosting differences, but might be interesting to people anyway. The code lives here: https://github.com/sveltejs/sites/tree/master/sites/hn.svelt...

[password4321]

I'll put in my request for https://nestjs.com/, "an application architecture out of the box".

[msoad]

For comparison this[1] is Next.js implementation that uses React Server Components (RSC). I feel folks at Remix missed on React Server Components and now it will be a lot of work to make it work in Remix. Hopefully I'm wrong.

If you don't know, RSC allows the HTML from server to start streaming as React is rendering the components in the backend. It allows fine grain control to what part of page renders first and which parts can be rendered later as HTML and data is streaming from the server. Before this, all of React server frameworks would render the entire page, shove "hydration data" in it which is mostly repeated data that is used to render the page and also include that HTML in the form of complied JSX in the page in the page scripts. Obviously that would make React SSR very bulky and unscalable. That's why RSC can solve so many React performance problems

[1] https://github.com/vercel/next-react-server-components

[kentcdodds]

Here's an objective comparison that Ryan Florence (Remix co-creator) made showing a Remix Hacker News Clone (not the one posted, but one he built himself) vs the Next.js implementation you're talking about here: https://remix.run/blog/react-server-components

If React Server Components can improve things for Remix (they can't right now, but maybe they will get better?) and if it is ever released (it's been 5 years now... and they still are saying they've got a long way to go), then Remix will ship support for them and it will be a non-breaking change for Remix users.

[ryanflorence]

Remix co-author here. We haven't "missed on RSC", they aren't even released!

We already have experimental versions of Remix running on React 18 and have experimented with RSC, Suspense, and streaming extensively. In their current state however, we're not seeing them beat Remix's current approach in production results or developer ergonomics. We've been providing the React team with our feedback. When these features from React are ready, Remix will be able to easily support them.

[nvegater]

Im not sure this is a fair comparison. The Nextjs implementation seems more like "let just get it running somehow". OP's codebase is looking scalable and maintainable. Any React developer would have a very easy time getting used to the code (first-glance-readable patterns and functions, uses Typescript etc...) whereas the Nextjs implementation uses very rare patterns and file structure for a Nextjs application (IMHO).

For example, where are the styles for the skeleton ? Why inserting CSS with "dangerouslySetInnerHTML" in the index.js ? Maybe its easy and I am missing some obvious stuff but the code doesnt seem very readable to me. Maybe is due to the nature of Server Components in Nextjs ? Would be nice to hear someone else's opinion on the patterns used in this repo.

OPs code on the other hand is a piece of cake to understand. Really good job!

[dannyphantom]

Huh, how cool. This may just be an odd coincidence but I have very photosensitive eyes so there are a few custom settings I cycle through whenever I need to reduce eye strain. Switched my settings back to mfg preset and for some reason the website is easier on my eyes than regular HN. The colors are all the same, the layout is the same, the zoom is the same - can't really figure out why but I thought that was neat.

[lowboy]

On my machine the clone has more padding and line height, which makes it easier on the eyes

[assemblylang]

Great implementation, looks identical to HN and is very responsive! HN is a great website for trying out web frameworks, given how simple it is in terms of features and design. I made an alternative front end for HN not too long ago that was styled like the Windows XP desktop[0], was good fun. I wonder how many HN clones and front ends have been written for HN at this point, I'm guessing at least several hundred.

[0] https://hackerxp.com/

[loanl]

Looking nice! I think Remix is gaining substantial popularity over Next.js these days. It's pretty interesting to watch.

[TameAntelope]

Only thing I notice is that the collapse button isn't a button and is the entire [-] thing, vs. just the - or + being an actual button.

Very great work! I love destroying the notion that you have to use some esoteric hyper-optimized tech to get quality performance.

[k__]

Yes, the buttons and links here are horribly tiny on mobile.

I don't know the stats, but I could imagine that HN is used by quite some mobile users, so an UX update would be appreciated.

[austinkhale]

Really interesting. I’ve been wanting to try Remix out for a bit after heavily investing in Next.

Side note: seems like there is some sort of issue when swiping back on iOS Safari. Periodically getting flashes of the incorrect content.

[baobabKoodaa]

This seems interesting! I'm not too familiar with Remix, could you expand on this bit:

> Most apps can be built leveraging web fundamentals (form/anchor tag) requiring no state management library

[clintonwoo]

In general a client side web app might use something like Redux to hold state and make requests to the server using JavaScript (`fetch` for example). But with Remix you can just use HTML <form action="/submit" method="POST"> tags and have an `action`or `loader` which handles the response for it! This way the app even works when JS is disabled (Usually to redirect you to a new page after an action).

Remix also provides a higher level <Form> React component and hook with support for extra states like loading etc!

[azangru]

It might help watching their release video: https://www.youtube.com/watch?v=wsJaUjd1rUo

And other videos on their youtube channel discussing their framework: https://www.youtube.com/c/Remix-Run/videos

[terrycody]

I really hope someone can made this info a wordpress theme+plugin, then add some auto deleted thread after X times, then cool!