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

11–20 of 51 posts

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

#11

Post by nvegater »

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…

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!

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

#12

Post by baobabKoodaa »

clintonwoo wrote: post #9
baobabKoodaa wrote: post #8

Earlier quoted context omitted.

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.

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 will be broken.

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

#13

Post by sergiodxa »

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…

I was coming to say something like this, also if Remix ever supports RSC it will most likely (IMO) be under noticed, like you just name a route `.server.tsx` and it will be a RSC and that's it, I don't think Remix will need a breaking change for this and RSC seems more like an implementation detail Remix has rather than something super big for the framework.

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

#14

Post by PleaseDisclose »

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…

Hey Kent, could you please disclose that you work for Remix as well?

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

#15

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

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

#16

Post by sergiodxa »

baobabKoodaa wrote: post #12
clintonwoo wrote: post #9

Earlier quoted context omitted.

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.

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

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

#17

Post by sergiodxa »

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.

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

#18

Post by woah »

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?

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.

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

#20

Post by alana99 »

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 criticism here as the site definitely works well regardless.

Post reply on HN