- Frontend Architectures
There are several architecture patterns involved in building web solutions:
- Server-Side Rendering (SSR)
- Client-Side Rendering (CSR)
- Single Page Application (SPA)
- Progressive Web App (PWA)
- Micro Front Ends
Client-Side Rendering (CSR) / Single Page Application (SPA)
- CSR/SPA promotes building interactive web applications. Here the request is directed to a single HTML file and the server delivers it without any content. In parallel, all the JS is fetched, and the browser compiles it all before rendering the final view
- Once the application is fully loaded into the browser, SPA ensures fast rendering, is good for scaling and supports both web and mobile channels
- The major issue with CSR is that it does not lend itself well for SEO, leads to slow first-time load and does not support older browsers
Server-Side Rendering (SSR)
- In this pattern, the HTML is rendered by the server. This brings in advantages such as SEO and quick first page load. Since the content is fetched from the server, more time is involved to display content to the user. In addition, SSR cannot effectively handle heavy server requests (repeated HTML, CSS) and results into slowness
- Usually considered to be a more basic pattern since it leads to poor interaction with the end-user and the inability to create rich UI
Progressive Web App (PWA)
- PWA uses a similar approach to that of SPA with some additional services which needs to be supported by the browser and the OS
- PWA brings in support for offline viewing experiences, background synchronization and push notifications
ISOMORPHIC JS
- Isomorphic JavaScript applications can run both on the client-side as well as the server-side
- First, the client loads an HTML (think SSR), and by doing so, the JS application is loaded into the browser. Next, the app starts running as a SPA
- The advantage of this approach is that it brings in the benefits of SSR and SPA – meaning SEO as well as fast-rendering
- Unfortunately, the drawback is that it is, at this point, only supported by JavaScript. So, the tech stack is limited to JS based frameworks and tools
Micro Front Ends
- Micro frontends are similar to the microservices concept in the backend. It is a set of techniques, approaches, and strategies for building modern web application, which may be developed by several teams independently, including different technology stacks and frameworks
- This primarily brings in the advantages of having a larger technology spectrum to work with
- However, if not done right, then it brings in operational overhead in the areas of integration. Finally the responsibility of enforcing best practices falls on the development team as there is no clear established standards that have yet been rolled out
- Root