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

21–30 of 51 posts

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

#21

Post by baobabKoodaa »

sergiodxa wrote: post #16
baobabKoodaa wrote: post #12

Earlier quoted context omitted.

React Router isn't a state management library and doesn't provide global state. As far as I can tell, using Remix/React/React Router in this way would result in broken behavior. As an example, consider a news website that has infinite scroll on the front page. When the user clicks on an article and then clicks back, the user will see a version of the front page that is different from before, and their scroll position…

Remix has a ScrollRestoration component to handle the scroll position when going back and forward in the browser history. When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. Re global state, in my experience with Remix and before it with tools like Rea…

> When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data.

In this news site example the "previous data" was fetched with infinite scroll, and it was lost from memory when the user navigated to the new page. So when the user clicks back in their browser, the browser is unable to show the previous data, because it does not have the previous data in memory any more.

> Re global state, in my experience with Remix and before it with tools like React Query, once you move the server state (data fetched from an API or queried from a DB) outside tools like Redux, then what you have left is mostly UI state (input values, open/close states, etc.) and you don't need Redux for that.

> And if your app is more complex (like a canvas-like app for example) you can either use a state + context in a parent component or you can use Redux or any other state management library, Remix once JS load will not cause a full page navigation so if you initialize a global state in something like Remix it will keep working across page navigations, even if you click back it will keep the state because Remix uses RR to navigate so it's pure client-side navigation.

All this sounds like typical state management in any React app: keep local UI state in React components (no need need for a state management library) and use a state management library to maintain global state.

Your README gave the impression that Remix leverages web fundamentals in a way that removes/reduces the need for a state management library, but based on this discussion it sounds like that is not the case. Thanks for your answers and sorry about hijacking this thread for this.

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

#22

Post by clintonwoo »

woah wrote: post #19

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

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.

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

#23

Post by mattwad »

sergiodxa wrote: post #17
ahmedfromtunis wrote: post #15

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?

You're probably feeling it's faster because it's using 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.

That's not right.. it's literally only on the 'new' and 'threads' links in the top navigation: https://github.com/clintonwoo/hackernews-remix-react/search?...

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

#24

Post by Jcampuzano2 »

baobabKoodaa wrote: post #21
sergiodxa wrote: post #16

Earlier quoted context omitted.

Remix has a ScrollRestoration component to handle the scroll position when going back and forward in the browser history. When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. Re global state, in my experience with Remix and before it with tools like Rea…

> When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. In this news site example the "previous data" was fetched with infinite scroll, and it was lost from memory when the user navigated to the new page. So when the user clicks back in their browser, th…

To answer this question - There is nothing stopping you from fetching on the client still while using remix or from for example wrapping your app with a provider where you can store cached client side data.

Page transitions happen on the client when you have JS enabled so that data will still be in memory if done as such.

But I do want to mention that the specific use case you mention is not what 80%+ of apps are doing and I think you're being a bit unfair. Remix ABSOLUTELY does get rid of most needs for a client side state management solution. Most apps are fetching data and displaying it primarily on page load/route transitions. Or for instance on query param change for paginated data. This is the use case Remix targets, and it does a fantastic job of simplifying the code for this and making it much faster.

For those cases where you really do need to do client side data fetching you are free to do so.

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

#25

Post by bern4444 »

alana99 wrote: post #20
ahmedfromtunis wrote: post #15

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?

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

Remix (which uses React as the UI library) is server side rendered

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

#26

Post by baobabKoodaa »

Jcampuzano2 wrote: post #24
baobabKoodaa wrote: post #21

Earlier quoted context omitted.

> When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. In this news site example the "previous data" was fetched with infinite scroll, and it was lost from memory when the user navigated to the new page. So when the user clicks back in their browser, th…

To answer this question - There is nothing stopping you from fetching on the client still while using remix or from for example wrapping your app with a provider where you can store cached client side data. Page transitions happen on the client when you have JS enabled so that data will still be in memory if done as such. But I do want to mention that the specific use case you mention is not what 80%+ of apps are doi…

> Remix ABSOLUTELY does get rid of most needs for a client side state management solution. Most apps are fetching data and displaying it primarily on page load/route transitions. Or for instance on query param change for paginated data. This is the use case Remix targets, and it does a fantastic job of simplifying the code for this and making it much faster.

But do these use cases require a state management library in the first place? Can you provide an example where using React Component state is not sufficient - a state management library is needed - and then Remix removes this need?

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

#27

Post by andrewingram »

kentcdodds wrote: post #10
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…

What's been 5 years? Server components were first shown off just over a year ago. If you mean suspense as a whole, then sure, it's been in the kitchen a long time.

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

#28

Post by cyral »

ahmedfromtunis wrote: post #15

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?

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.

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

#29

Post by tshaddox »

bern4444 wrote: post #25
alana99 wrote: post #20

Earlier quoted context omitted.

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

Remix (which uses React as the UI library) is server side rendered

True, but it still needs to download a big chunk of JS to have client-side routing.

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

#30

Post by benmccann »

woah wrote: post #19

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

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...

Post reply on HN