Live data from Hacker News

Scaling React Server Side Rendering

arkwright.github.io

131–137 of 137 posts

Re: Scaling React Server Side Rendering

#131
post #23

Great read ! What did you use to draw the diagrams ?

Diagrams are drawn with a Pilot Fineliner (greatest pen ever) in an artist's sketchbook. I then take a photo with my phone, crop to size, and run the image through a two stage conversion process. First ImageMagick converts the image to grayscale and cranks up the contrast. Second, Potrace converts the grayscale bitmap to an SVG. This was my hack way of avoiding the purchase of a tablet. One interesting consequence of…

Even my diagram sucks! Thanks for this amazing trick!!!

Re: Scaling React Server Side Rendering

#132

Earlier quoted context omitted.

>That's how most of the world's population will experience your site. Unless you're FAANG you probably don't care about most of the world's population, but the tiny slice that is most likely to see your site and generate revenue for you. It's not baffling that most developers don't make things for most people. That's just a waste of time and money.

What people fail to consider is even with the high end smartphones, how do we know you are guranteed full speed 4G all the time? The network speed varies greatly in various places (in the subway, through the tunnels etc) and more often that not, we have sucky network speeds even though we are on "4G"

I suppose it depends on how much you want to put effort into optimizing a single app for all users, rather than having a lite version of the site.

For my company, we serve images and video. Even multi megabyte JavaScript only equals one minute of a 720p videos runtime.

For people on restricted connections, we have a lite versions with less than 100k JavaScript and videos transcoded to 260p.

Re: Scaling React Server Side Rendering

#133
post #130

Earlier quoted context omitted.

Good point and I agree that the borders between SPA and SSR are blurry. However, I just wanted to stress that a debate without having requirements is useless, it's like saying a racing car is better than a truck. But for what? Building websites is not like building websites 20 years ago. There are many uses cases and saying one is better than the other rather shows that you never experienced the other side. I mean, t…

Yeah, I never quite liked the currenly en vogue mixed approaches, where it's harder to draw a line, you often have to serve two masters and you feel it's mostly done that way because React developers don't want to learn anything else, despite cases where a complete server-side approach with an old-school template language might be a better fit, despite how hip functional reactive component based development is. But a…

Re your second point: How is the SSR scene in Go land? Are there thriving ecosystems?

Besides, it took me a long to leave pug/stylus, I'am still not sure if a pug-based SSR is still the best way to get stuff out of the door. But again, opting for an 10 years old stack let you miss lot of things (eg maintainability of react code is top-notch).

Re: Scaling React Server Side Rendering

#134
post #130

Earlier quoted context omitted.

Yeah, I never quite liked the currenly en vogue mixed approaches, where it's harder to draw a line, you often have to serve two masters and you feel it's mostly done that way because React developers don't want to learn anything else, despite cases where a complete server-side approach with an old-school template language might be a better fit, despite how hip functional reactive component based development is. But a…

Re your second point: How is the SSR scene in Go land? Are there thriving ecosystems? Besides, it took me a long to leave pug/stylus, I'am still not sure if a pug-based SSR is still the best way to get stuff out of the door. But again, opting for an 10 years old stack let you miss lot of things (eg maintainability of react code is top-notch).

I don't think I heard "SSR" in a context where it's just about backend HTML generation like we did in the olden days, only when it comes to reify JS views on the server. Haven't heard of an embedded JS interpreter or transpiler that does that.

When it comes to generating dynamic or static web page content, the pathological framework-aversion of the Go community strikes hard. Probably nothing that doesn't use the built-in Go templates with any sufficient user backing. This doesn't appear to be a language that can birth something like RoR.

As for the maintainability of react, I'm not so excited. It's a pretty decent templating system, and it seems easy enough to compose components, but beyond that it's each to their own, with some approaches being better than others. And redux still doesn't grab me as that great, it's just the sheer amount of developers resulted in a nice toolset. Whether it's frontend or backend, the twin async and dependency hells of JS don't manage to make me sleep any better, either.

I don't give a flying frick for age myself. Sure, there's less tooling for partials than for components, but that might have a reason.

Re: Scaling React Server Side Rendering

#135

Earlier quoted context omitted.

Diagrams are drawn with a Pilot Fineliner (greatest pen ever) in an artist's sketchbook. I then take a photo with my phone, crop to size, and run the image through a two stage conversion process. First ImageMagick converts the image to grayscale and cranks up the contrast. Second, Potrace converts the grayscale bitmap to an SVG. This was my hack way of avoiding the purchase of a tablet. One interesting consequence of…

Even my diagram sucks! Thanks for this amazing trick!!!

[deleted]

Re: Scaling React Server Side Rendering

#136

Earlier quoted context omitted.

> * Properly serialize your JSON strings. That's what we use: https://gist.github.com/eliseumds/6192135660267e2c64180a8a9c... . That doesn’t look like “properly”. The double escaping is overcomplicated and no safer compared to a direct window.__productreview_data = ${escapedReduxStateJsonString}; (and forgets about \v, maybe others), the transformation doesn’t preserve “ Closer to correct: JSON.stringify(data) .repla…

Thanks for pointing out the ` https://v8.dev/blog/cost-of-javascript-2019 . From what I remember, we had some issues with IE11, thus the replacement for the other characters. We'll consider "application/json", makes sense.

Given a correct function that converts a JSON-representable value to embed-safe JSON, you can use it on the JSON to get your JSON.parse performance:

  const inlineJSON = data =>
    JSON.stringify(data)
      .replace(/\u2028/g, '\\u2028')
      .replace(/\u2029/g, '\\u2029')
      .replace(/
with:

  const escapedReduxStateJsonString = inlineJSON(JSON.stringify(data));
But yeah, the isolated thing is usually even better (more compact in addition to the security benefit).

Re: Scaling React Server Side Rendering

#137

This looks like a great piece of article. Kudos to the people who wrote it because the most sure-shot problem in SSR is running to scaling issues and this is a much needed one. But here's an unpopular opinion: Server side rendering shouldn't even be a thing. Running a language as dynamic as Javascript on servers, is at best - a problem that can be dealt with, but not necessarily the solution. I'm saying this as a ful…

The whole point of SSR is SEO and increased performance.
Post reply on HN