webapp-rendering-strategies-2019.md

WebApp Rendering Strategies 2019

Client Side Rendering

Tooling: Hyperapp, Mithril, React, Vue

Pros

• Dynamic Routing. There's no refresh when routing between pages.

Cons

• JavaScript must be downloaded before the page can begin to render, slowing down first paint performance.[1]
• Most modern search engines claim to be able to crawl dynamic content, but it's not as reliable.[2]

Server Side Rendering

Tooling: Next.js, Php

Pros

• First paint performance is generally better because the markup can start rendering before JavaScript has finished downloading. This can vary based on how your app is architected.
• Search engines will always be able to crawl your content.

Cons

• Increased server workload. Pages have to be rendered on every request.
• Requires a refresh when routing between pages.

Static Rendering

Tooling: Gatsby, Jekyll, NetlifyCMS

Pros

• First paint performance should be better because the markup can start rendering before JavaScript has finished downloading. This can vary based on how your app is architected.
• Doesn't require a refresh when routing between pages if there's a SPA on top of the statically rendered page.
• Search engines will always be able to crawl your content.

Cons

• Requires a rebuild and redeploy of the project to publish new content.

Server Side Pre-Rendering

Tooling: ???

Pros

• First paint performance is generally better because the markup can start rendering before JavaScript has finished downloading. This can vary based on how your app is architected.
• Pages are compiled server side during CRUD operations meaning this rendering method doesn't require a rebuild and redeploy of the project to publish new content.
• Doesn't require a refresh when routing between pages if there's a SPA on top of the statically rendered page.
• Search engines will always be able to crawl your content.

Cons

• May compile lots of content that no one well ever see.
• Will have to recompile the entire site when the UI changes.
• Concurrency problems if you attempt to render dynamic content statically. (example: statically rendering markup that says "99 articles", deleting an article, then not re-rendering the entire site)

References

[1] needs a reference to support this claim
[2] needs a reference to support this claim