Skip to main content

Build

Setup, build and deliver quickly and efficiently.

note

This page is missing probably a lot of content. You can help contributing to it.

Choosing an architecture for the Web​

Currently on the frontend side mainly separates architectures by how much of the content is rendered on the client side, and how much is done on the server side. There is a few way to run a frontend app.

  • CSR: Client Side Rendering
  • SSR: Server Side Rendering
  • SSG: Static Site Generation (build time generation)

For these use cases there are 4 typical architecture to consider.

SPA​

https://www.patterns.dev/posts/client-side-rendering

  • UI is fully rendered on the client side
  • Doesn't require "web server", just hosting
  • You have to send bulky JS payload over the network
    • Can cause slower loading times, performance needs attention for bigger apps.
    • Can cause suboptimal SEO results in extreme cases
  • Every client requests the data from the backend via Rest, GraphQL or Websockets

SSR​

https://www.patterns.dev/posts/server-side-rendering

  • The app is first prerendered on the server side
  • A smaller prerendered content is sent over the network first
  • The the bulky JS content is sent after the content, and then a "rehydration" happens, after that it can behave like an SPA
  • Mitigates the loading time problem of SPAs
  • The dehydration on ther server and rehydration on the client side bring additional complexities that may result more bugs.

Islands Architecture​

https://www.patterns.dev/posts/islands-architecture

  • For applications with mainly static content mixed with "Islands" of dynamic content.
  • Frameworks support mixed CSR, SSR, SSG content.

Static pages (MPA)​

https://www.patterns.dev/posts/static-rendering