syaf writes

Came across a few front-end concepts when building this blog which is built on Next.js and Cosmic JS.

Headless CMS

Headless Content Management System (CMS) means decoupling the View layer from the back end, or content management system. This is unlike the typical CMS systems like WordPress.

Pros:

- Reusability: You're able to serve the same content across different channels 

- Performance: You're able to pick the most suitable front-end frameworks depending on your workload and requirements. 

- Scalability: Independently scale the presentation layer if necessary

Cons: 

- Additional complexity especially for smaller projects.

Rendering Patterns

I was looking into what Next.js had to offer compared to other frameworks, and came to realise there were many rendering strategies available for the frontend. This video was a good summary.

1. Static Website - Create static files in advance and serve them from a storage service (eg. S3). However, this is only suitable for basic websites where the data is not dynamic.

2. Multi Page Applications (MPA) - The server (eg. Node.js) renders the page, depending on the user requests. This approach is slower as it requires a round trip to the server for every page load. Examples include Ruby on Rails, Django, Laravel, Wordpress. 

3. Single Page Applications (SPA) - A single HTML page will act as a container (hence the term "single page") for dynamic data, which is updated based on user interactions. This is much faster than MPA. However, this comes with a larger initial JavaScript bundle and since only the shell is rendered, it is not optimised for SEO. Examples include Angular and React.

4. Server Side Rendering (SSR) - A mix of MPA and SPA strategies by initially rendering the site on the server, followed by client-side hydration to provide a responsive experience. However, this means we will still need to run a server. Examples include Next.js and Nuxt.js. 

5. Static Site Generation (SSG) - Pre-render the page into HTML and store in storage, which are then served statically. Then hydrate with JavaScript after the initial page loads.

These are some of the main strategies used so far in front-end development.