6 ms·

Web Rendering Patterns

86 points by rasmero 4y ago

astrod 4y ago
There is also react server components now that tries to solve some of the island architecture pitfalls.
knjo 4y ago
Is this the text version of Beyond Fireship's video[0]? I don't see any credit to the original author. [0] - https://m.youtube.com/watch?v=Dkx5ydvtpCA https://m.youtube.com/watch?v=Dkx5ydvtpCA
- jjdeveloper 4y ago
  Very true
- moshimoto 4y ago
  Hey, it's the author here. I didn't just use that video. I was keeping this post for myself, but after putting my website, it somehow blew up here. It was not 100% ready for public tbh. Just added the credits.
  - chrismorgan 4y ago
    Since you’re here: could you please remove the universal `letter-spacing: 1.5px` from the stylesheet? It’s never reasonable to use nonzero letter-spacing on body text. (Montserrat is also a dubious choice for body text—it’s not at all designed for the purpose.)
quechimba 4y ago
I think there is one pattern missing here. I've been working on a framework that has a server side virtual DOM, so all rendering happens on the server and updates are streamed to the browser. Kinda feels like React, but it's 100% server side. https://github.com/mayu-live/framework https://github.com/mayu-live/framework
- culi 4y ago
  Like hotwire? https://hotwired.dev/ https://hotwired.dev/ If it's just component rendering then how does it differ from Streaming SSR?
  - quechimba 4y ago
    Streaming SSR, as I understand it, does not keep a session alive on the server, so if you make interactive components they will still run in the browser. So I think it's more like Hotwired, because it keeps a session alive on the server, but it's declarative like React, so you just return whatever you want rendered and the VDOM will generate patches for the browser.
  - tiberriver256 4y ago
    Instead of transferring entire components it transfers only the content that has changed since the last render. So if you have a like button with the number of likes totalling 3, and someone were to hit the like button to increase the count to 4 the only content transferred would literally be a string value of '4'
    - irrational 4y ago
      If it literally only transfers “4”, how does it know where to put it?
  - dmitriid 4y ago
    More like Phoenix LiveView: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html
- wizofaus 4y ago
  Isn't that more or less what ASP tries/tried to do? What format are the updates in?
  - quechimba 4y ago
rektide 4y ago
Generally loving this breakdown! Good wide review. Qwik has a lot more going for it that I knew. It's used by CloudFlare's Mastadon/ActivityPub implememtation. At first that was kind of a turn off to me; the initial research I did on it didnt really sell me. But this simple breakdown makes a lot of sense! One thing that did bug me: this portrays Single Page Apps as having to load the whole site ahead of time. Projects like react-router have had exemplary incremental loading for a long long time now. I wish this was a more frequent focus. We never really got great at unbundling, breaking out multiple units of code; the hope that ESM would let us fully unbundle was the miracle that never delivered, alas, where any incremental load would just automatically quickly get whatever other new deps were needed. But there's definitely still a much wider terrain than is portrayed here for SPA. But again, thumbs up mostly! We dont have many quick easy reviews of whats out there, how we do the web, and this post is a great quick understandable introduction. Great material.
yuzuquat 4y ago
If you're willing to entertain MPAs, there's small little library called swup that creates seamless transitions between routes (eg. /home, /faq) despite them being 2 different domains. I'm trying it out for www.lona.so and it looks pretty interesting so far Effectively this it what it does - intercept links to other pages, loads them in the background, then swaps out the contents of the current page with the new page. Your MPA effectively becomes an SPA with just some minor rejiggering
- samkon 4y ago
  Sounds like turbo links
- have_faith 4y ago
  This sounds like memory leaks waiting to happen, does it guard against that somehow?
aleksiy123 4y ago
Any chance the framework logos could be links? Some of them are hard to see.
fatih-erikli 4y ago
Too subjective. If server cost is not a problem for the thing you call "multi-page", it is not a problem for server-side rendering either. Vercel didn't invent server side rendering. It was always there.
- aobdev 4y ago
  Unfortunately the given examples (Next and Nuxt) are much slower than traditional template engines, even in "slow" languages like Python + Jinja2. This may not translate into financial cost at the scale of your average startup but it does have a measurable performance cost for each page load.
  - fatih-erikli 4y ago
    You don't need next or nuxt. Server side rendering supported by React itself. You just need a node-js running instance.
- chrismorgan 4y ago
  > It was always there. This article isn’t talking about server-side rendering, as one might have used the term 10–15 years ago (but not really before that, because it didn’t need a name before that, because client-side rendering wasn’t really a thing), but rather Server-Side Rendering, which is when you use client-side rendering tech, but run it on the server side (typically “as well”, but not quite necessarily).
xnx 4y ago
You can watch the original Fireship video that this page seems to be a summary of here: https://www.youtube.com/watch?v=Dkx5ydvtpCA https://www.youtube.com/watch?v=Dkx5ydvtpCA
anko 4y ago
which one is elixir liveview?
- lionkor 4y ago
  the one you use and dont tell anyone about so you have an advantage
olodus 4y ago
I feel like HTMX should have a place somewhere there at the top next to Static, as "Expanded HTML" or simply HATEOAS or something like that. Very comprehensive list otherwise.
- mmkos 4y ago
  I'm not sure how HATEOAS fits here.. it's a rest principle guiding how one should be able to interact with an API to the best of my knowledge. Please clarify.
- culi 4y ago
  But... isn't it just a front-end library? This is a post about rendering patterns. In that regard it's no different from jQuery
bestest 4y ago
This is a very subjective list and I wonder what it does on the front-page, as it's very contrived and often wrong or misleading.
nicbou 4y ago
No content management system and other server-side rendering options? This is how the majority of the web still works.
- fruit2020 4y ago
  Frontend devs only know javascript
  - eurasiantiger 4y ago
    Which is a good language for the web
    - fruit2020 4y ago
      For the web, ofc. It runs in the browser. But for the backend there are many choices. If you read the list of options in the article all of them spawn from javascript.
- mmkos 4y ago
  A CMS is only a data source? I'm not sure what you have in mind. Can you elaborate?
  - nicbou 4y ago
    Most CMSes generate templates on the server side, handling pagination, RSS feeds etc.
parasti 4y ago
I wish there was more written here about how each approach of delivering JS/HTML and adding interactivity works on the server and on the client in techical terms. The nomenclature used for these quickly turns into a confusing mess.
- itsuka 4y ago
  This resource explores each pattern in depth (excluding resumability): https://www.patterns.dev/posts/rendering-patterns/ https://www.patterns.dev/posts/rendering-patterns/ You can also check the illustration at the bottom of the page for a brief summary.
tobr 4y ago
Somewhat interesting enumeration, but unbelievably poor writing. What does this sentence even mean? > We find ourselves in an era where a new Javascript framework was born, bringing exciting possibilities to the web development landscape. If it has said “a span of several minutes” rather than “an era”, it would have made sense.
lionkor 4y ago
I find myself loving the idea and way Phoenix LiveView works - ontop of Elixir being quite nice.
bob1029 4y ago
I don't think it really matters how the DOM information gets to the client. What is more important to me is how much of the state is kept on the client and how complicated it is to synchronize with the state on the server. I've found the most elegant "patterns" to be ones where the server maintains virtually all of the state, with the client operating more-or-less as a dumb terminal.
nazka 4y ago
qwik may be appealing technically, but it's not the best fit for web applications because: 1. You're required to use qwik's API for React, limiting your flexibility and hiring. 2. The lack of compatibility with the vast React components and libraries ecosystem means you'll have to start from scratch on all your components, even essential ones like calendars, MaterialUI, charts, etc... If your focus is on creating a website and try something else than say Gatsby, then qwik may be a good option. However, for web applications and the ability to fully utilize the React ecosystem, it doesn't seem to be the best choice.
- mixedCase 4y ago
  Point 1 is irrelevant unless you're hiring devs who cannot adapt quickly to minor changes, in which case it's an useful hiring filter. Everything else about not being able to integrate with the React ecosystem is incorrect, please read this part of the documentation where it explains in detail how to do it and how to integrate it with Resumability in mind: https://qwik.builder.io/integrations/integration/react/ https://qwik.builder.io/integrations/integration/react/
  - nazka 4y ago
    My bad, sorry for the misinformation from my previous comment. I will dive more into the link you gave me to see the limitations they talk about and the small vs big island. But it makes me reconsider using qwik for future projects. Thank you for point this out to me and taking the time to respond!

86 points by rasmero 4y ago

There is also react server components now that tries to solve some of the island architecture pitfalls.

knjo 4y ago

Is this the text version of Beyond Fireship's video[0]? I don't see any credit to the original author. [0] - https://m.youtube.com/watch?v=Dkx5ydvtpCA https://m.youtube.com/watch?v=Dkx5ydvtpCA

jjdeveloper 4y ago
Very true
moshimoto 4y ago
Hey, it's the author here. I didn't just use that video. I was keeping this post for myself, but after putting my website, it somehow blew up here. It was not 100% ready for public tbh. Just added the credits.
- chrismorgan 4y ago
  Since you’re here: could you please remove the universal `letter-spacing: 1.5px` from the stylesheet? It’s never reasonable to use nonzero letter-spacing on body text. (Montserrat is also a dubious choice for body text—it’s not at all designed for the purpose.)

quechimba 4y ago

I think there is one pattern missing here. I've been working on a framework that has a server side virtual DOM, so all rendering happens on the server and updates are streamed to the browser. Kinda feels like React, but it's 100% server side. https://github.com/mayu-live/framework https://github.com/mayu-live/framework

culi 4y ago
Like hotwire? https://hotwired.dev/ https://hotwired.dev/ If it's just component rendering then how does it differ from Streaming SSR?
- quechimba 4y ago
  Streaming SSR, as I understand it, does not keep a session alive on the server, so if you make interactive components they will still run in the browser. So I think it's more like Hotwired, because it keeps a session alive on the server, but it's declarative like React, so you just return whatever you want rendered and the VDOM will generate patches for the browser.
- tiberriver256 4y ago
  Instead of transferring entire components it transfers only the content that has changed since the last render. So if you have a like button with the number of likes totalling 3, and someone were to hit the like button to increase the count to 4 the only content transferred would literally be a string value of '4'
  - irrational 4y ago
    If it literally only transfers “4”, how does it know where to put it?
- dmitriid 4y ago
  More like Phoenix LiveView: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html
wizofaus 4y ago
Isn't that more or less what ASP tries/tried to do? What format are the updates in?
- quechimba 4y ago

rektide 4y ago

Generally loving this breakdown! Good wide review. Qwik has a lot more going for it that I knew. It's used by CloudFlare's Mastadon/ActivityPub implememtation. At first that was kind of a turn off to me; the initial research I did on it didnt really sell me. But this simple breakdown makes a lot of sense! One thing that did bug me: this portrays Single Page Apps as having to load the whole site ahead of time. Projects like react-router have had exemplary incremental loading for a long long time now. I wish this was a more frequent focus. We never really got great at unbundling, breaking out multiple units of code; the hope that ESM would let us fully unbundle was the miracle that never delivered, alas, where any incremental load would just automatically quickly get whatever other new deps were needed. But there's definitely still a much wider terrain than is portrayed here for SPA. But again, thumbs up mostly! We dont have many quick easy reviews of whats out there, how we do the web, and this post is a great quick understandable introduction. Great material.

yuzuquat 4y ago

If you're willing to entertain MPAs, there's small little library called swup that creates seamless transitions between routes (eg. /home, /faq) despite them being 2 different domains. I'm trying it out for www.lona.so and it looks pretty interesting so far Effectively this it what it does - intercept links to other pages, loads them in the background, then swaps out the contents of the current page with the new page. Your MPA effectively becomes an SPA with just some minor rejiggering

samkon 4y ago
Sounds like turbo links
have_faith 4y ago
This sounds like memory leaks waiting to happen, does it guard against that somehow?

aleksiy123 4y ago

Any chance the framework logos could be links? Some of them are hard to see.

fatih-erikli 4y ago

Too subjective. If server cost is not a problem for the thing you call "multi-page", it is not a problem for server-side rendering either. Vercel didn't invent server side rendering. It was always there.

aobdev 4y ago
Unfortunately the given examples (Next and Nuxt) are much slower than traditional template engines, even in "slow" languages like Python + Jinja2. This may not translate into financial cost at the scale of your average startup but it does have a measurable performance cost for each page load.
- fatih-erikli 4y ago
  You don't need next or nuxt. Server side rendering supported by React itself. You just need a node-js running instance.
chrismorgan 4y ago
> It was always there. This article isn’t talking about server-side rendering, as one might have used the term 10–15 years ago (but not really before that, because it didn’t need a name before that, because client-side rendering wasn’t really a thing), but rather Server-Side Rendering, which is when you use client-side rendering tech, but run it on the server side (typically “as well”, but not quite necessarily).

xnx 4y ago

You can watch the original Fireship video that this page seems to be a summary of here: https://www.youtube.com/watch?v=Dkx5ydvtpCA https://www.youtube.com/watch?v=Dkx5ydvtpCA

anko 4y ago

which one is elixir liveview?

lionkor 4y ago
the one you use and dont tell anyone about so you have an advantage

olodus 4y ago

I feel like HTMX should have a place somewhere there at the top next to Static, as "Expanded HTML" or simply HATEOAS or something like that. Very comprehensive list otherwise.

mmkos 4y ago
I'm not sure how HATEOAS fits here.. it's a rest principle guiding how one should be able to interact with an API to the best of my knowledge. Please clarify.
culi 4y ago
But... isn't it just a front-end library? This is a post about rendering patterns. In that regard it's no different from jQuery

bestest 4y ago

This is a very subjective list and I wonder what it does on the front-page, as it's very contrived and often wrong or misleading.

nicbou 4y ago

No content management system and other server-side rendering options? This is how the majority of the web still works.

fruit2020 4y ago
Frontend devs only know javascript
- eurasiantiger 4y ago
  Which is a good language for the web
  - fruit2020 4y ago
    For the web, ofc. It runs in the browser. But for the backend there are many choices. If you read the list of options in the article all of them spawn from javascript.
mmkos 4y ago
A CMS is only a data source? I'm not sure what you have in mind. Can you elaborate?
- nicbou 4y ago
  Most CMSes generate templates on the server side, handling pagination, RSS feeds etc.

parasti 4y ago

I wish there was more written here about how each approach of delivering JS/HTML and adding interactivity works on the server and on the client in techical terms. The nomenclature used for these quickly turns into a confusing mess.

itsuka 4y ago
This resource explores each pattern in depth (excluding resumability): https://www.patterns.dev/posts/rendering-patterns/ https://www.patterns.dev/posts/rendering-patterns/ You can also check the illustration at the bottom of the page for a brief summary.

tobr 4y ago

Somewhat interesting enumeration, but unbelievably poor writing. What does this sentence even mean? > We find ourselves in an era where a new Javascript framework was born, bringing exciting possibilities to the web development landscape. If it has said “a span of several minutes” rather than “an era”, it would have made sense.

lionkor 4y ago

I find myself loving the idea and way Phoenix LiveView works - ontop of Elixir being quite nice.

bob1029 4y ago

I don't think it really matters how the DOM information gets to the client. What is more important to me is how much of the state is kept on the client and how complicated it is to synchronize with the state on the server. I've found the most elegant "patterns" to be ones where the server maintains virtually all of the state, with the client operating more-or-less as a dumb terminal.

nazka 4y ago

qwik may be appealing technically, but it's not the best fit for web applications because: 1. You're required to use qwik's API for React, limiting your flexibility and hiring. 2. The lack of compatibility with the vast React components and libraries ecosystem means you'll have to start from scratch on all your components, even essential ones like calendars, MaterialUI, charts, etc... If your focus is on creating a website and try something else than say Gatsby, then qwik may be a good option. However, for web applications and the ability to fully utilize the React ecosystem, it doesn't seem to be the best choice.

mixedCase 4y ago
Point 1 is irrelevant unless you're hiring devs who cannot adapt quickly to minor changes, in which case it's an useful hiring filter. Everything else about not being able to integrate with the React ecosystem is incorrect, please read this part of the documentation where it explains in detail how to do it and how to integrate it with Resumability in mind: https://qwik.builder.io/integrations/integration/react/ https://qwik.builder.io/integrations/integration/react/
- nazka 4y ago
  My bad, sorry for the misinformation from my previous comment. I will dive more into the link you gave me to see the limitations they talk about and the small vs big island. But it makes me reconsider using qwik for future projects. Thank you for point this out to me and taking the time to respond!