Javascript Framework
Server-side Frameworks
#Overview
As opposed to client-side frameworks, server-side frameworks use server-side rendering (SSR) whereby the webpages are rendered on the server. When a user requests a web page, the server processes the request and sends the complete HTML document to the client's browser.
The client-side rendering was suitable for dynamic and interactive websites, but building static websites such as a blog requiring Search Engine Optimization (SEO) was not preferable. Hence, server-side frameworks like Gatsby, Next.js, and Nuxt.js were introduced which are built on top of existing client-side frameworks like React or Vue.js.
This helps in better SEO as search engines can more easily crawl and index the content of SSR pages because the HTML content is readily available. The initial loading is also faster making it perfect for static websites with not much interactivity.
#Next.js
Next.js is an open-source React framework to build server-side rendered applications. The process of building the UI and the components are the same as React but Next.js provides more functionalities for full-stack web development with different options of rendering. It offers client-side routing for navigation between pages without a full reload and image and font optimization for different screen sizes for performance.
Resources
- Next.js Official Documentation
- Mastering Next.js Course
- Video: Next.js 13 - The Basics by Beyond Fireship
- Video: Do You Really Need SSR by Theo
#Angular Universal
Angular Universal is the official library to create SSR applications in Angular created by the community. Unlike the other frameworks like Next.js, or Nuxt.js, Angular Universal is developed to work seamlessly with an existing Angular project. It’s not a full-blown framework working independently but instead, it is a library that works by adding the dependency in your Angular project to enable the SSR.
Resources
- SSR with Angular Universal
- Angular Universal: A Complete Practical Guide
- Angular Universal Server-Side Rendering Deep-Dive
#Nuxt
Nuxt.js is a popular open-source framework for building server-rendered Vue.js applications. It simplifies the process of creating Vue.js applications that can be rendered on the server side and provides a powerful set of features and conventions for building full-stack web applications. Just like Next.js, Nuxt also provides various rendering methods like Static Site Generation (SSG), and Client-side Rendering (CSR) besides SSR and a few others.