Over the past few weeks I've been working on a small application to view trending repos on GitHub. I built the PWA[1] with React, Next.js and GraphQL .. but what's interesting is the application is only using React server side, meaning the client side javascript is only a few lines code adding some event listeners and registering a service worker for offline capability. This helped me achieve a perfect google chrome performance audit<p>I learned a ton working on it and would love to talk about it if anyone has any questions!<p>Application Link: <a href="https://trends.now.sh" rel="nofollow">https://trends.now.sh</a><p>Source code on Github: <a href="https://github.com/hanford/trends" rel="nofollow">https://github.com/hanford/trends</a><p>[1]: <a href="https://developers.google.com/web/progressive-web-apps/" rel="nofollow">https://developers.google.com/web/progressive-web-apps/</a>
I'm super intrigued by the client-side/server-side rendering question. When I discovered single page apps I thought I'd seen the future - servers were just things that hosted web services, and all the presentation was a bundled, minimized blob served up by a static CDN. So simple, so clean, such clear separation of concerns. But now I'm seeing reports of faster first page rendering with React server than React client, and here I'm seeing a clearly very smart person articulating a completely different class of benefit of server-side rendering. Clearly I shouldn't be walking away from old style server side rendering so casually. My question is how do you think about that choice, now that we have the freedom to go either direction?
The page load speed is seriously impressive, congrats!<p>There's something weird going on with the styling of the dropdowns, though: <a href="https://i.imgur.com/WQ3m52X.gif" rel="nofollow">https://i.imgur.com/WQ3m52X.gif</a><p>I'm on Windows 10 & Chrome
Related question:<p>Does anyone know of a solution to the jank on firefox (perhaps others) when you have a hover scale effect? I figure animating all dimensions and text size instead of scale may do the trick, but that's a pain.<p>I'd even be okay with indefinitely deferring the re-render at the end of the animation if possible.
Horrifying to see my stupid side (joke) project manipulated the star rankings. <a href="https://www.gitstarred.com/" rel="nofollow">https://www.gitstarred.com/</a>. I guess it doesn't take many stars to do that.
I like to check the trending repos once a day, but Github keeps moving the link to it, this is fantastic. While I am sure others will be asking to add more languages, could there be a feature to check multiple languages at once with the language displayed with the repo? It is annoying on Github to have to check both Javascript and Typescript for similar trending projects.<p>A simple vertical list would also be nice, but that is personal preference.
I did the same but with a PureScript frontend <a href="https://madnight.github.io/grendy/" rel="nofollow">https://madnight.github.io/grendy/</a> and a Haskell backend <a href="https://github.com/madnight/grendel" rel="nofollow">https://github.com/madnight/grendel</a>
No text on IE mobile.<p><a href="https://i.imgur.com/Naqr8Xg.jpg" rel="nofollow">https://i.imgur.com/Naqr8Xg.jpg</a><p>I know nobody supports IE mobile but I thought id report it. It's a shame because I was looking for exactly this app, and it seems to work otherwise
Changing the width or zooming in and out changes the number of columns (nice!), but the max seems to be 4. Is that a hard limit? Seems like a responsive UI should respect wider screens in landscape.
Nice work, btw.
Never used next, looks interesting. So with this setup, the browser doesn't do any work, all pages are loaded as if they were static, and rendered server side?