Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Hacker News clone using Remix and React

github.com

Post reply on HN
Print view View original

1–10 of 51 posts

Show HN: Hacker News clone using Remix and React

#1

Post by 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!)

Show HN: Hacker News clone using Remix and React
github.com

Re: Show HN: Hacker News clone using Remix and React

#5

Post by 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

Re: Show HN: Hacker News clone using Remix and React

#6

Post by clintonwoo »

baobabKoodaa wrote: post #4

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

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 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 React component and hook with support for extra states like loading etc!

Re: Show HN: Hacker News clone using Remix and React

#7

Post by azangru »

baobabKoodaa wrote: post #4

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

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

Re: Show HN: Hacker News clone using Remix and React

#8

Post by baobabKoodaa »

clintonwoo wrote: post #6
baobabKoodaa wrote: post #4

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

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 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 React component and h…

Hmmh, but what about global state for the 99% of users who do have JavaScript enabled? If I navigate to a page on a Remix app, and then hit the back button, does Remix do some trickery to maintain global state so that things such as scroll position are not broken?

Re: Show HN: Hacker News clone using Remix and React

#9

Post by clintonwoo »

baobabKoodaa wrote: post #8
clintonwoo wrote: post #6

Earlier quoted context omitted.

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 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 React component and h…

Hmmh, but what about global state for the 99% of users who do have JavaScript enabled? If I navigate to a page on a Remix app, and then hit the back button, does Remix do some trickery to maintain global state so that things such as scroll position are not broken?

Remix also supports client side React rendering so those redirects will be client side history and general routing logic applies just like using React Router. No page reloads will occur when using the Remix Form and Link component so the state is preserved according to regular React/React Router behaviour.

Re: Show HN: Hacker News clone using Remix and React

#10

Post by kentcdodds »

msoad wrote: post #5

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 whi…

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.

Post reply on HN