DEV Community

Zac J.Q. Yap
Zac J.Q. Yap

Posted on

Google's guide and chart for where to implement application logic and rendering

Alt Text
Source: https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Found this chart from a February 2019 Google Developer update which was very helpful for me in making architecture decisions and choosing frameworks to use (React frameworks like Next.js, Gatsby etc.) – instead of just going with the most heavily-marketed and hyped ones!

Note the tradeoffs between performance, SEO and overhead costs. Personally though, I don't think the Time To First Byte (TTFB) performance measure they use is that significant a consideration to take into account.

“Trisomorphic” rendering which was mentioned in the article, and not discussed as widely, seemed promising:
Use streaming server rendering for initial/non-JS navigations. Then have your service worker take on rendering of HTML for navigations. This keeps cached components and templates up to date. Enables SPA-style navigations to render new views in the same session. Works best when you share the same templating and routing code between the server, client page, and service worker.

If you are doing client-side rendering, make sure you implement aggressive code splitting and lazy-load Javascript!

--
If you found this helpful, I run a newsletter featuring more of such content at: https://pragmaticcs.substack.com/

Cheers,
Zac

Top comments (0)