Transitioning from a monolithic CMS? If you're decoupling templating from restrictive practices, the landscape of ever-evolving JavaScript frameworks can seem overwhelming.

However, among the plethora of choices, certain frameworks have distinguished themselves through prolonged use and successful deployments in production. Some have rapidly gained momentum by leveraging established conventions. This article delves into notable frameworks based on their adoption rates and community traction. Additionally, we'll look at integrating these frameworks with the Sanity content platform.

Advantages of a Composable Stack

Adopting a composable stack grants significant freedom, offering the flexibility to address unique business challenges. This approach enables the integration of specialized tools, potentially simplifying dev-ops, maintenance, and reliability. However, the onus is on you to pick the right set of services, tools, and frameworks aligned with your team's requirements.

Traits of Composable Frontend Frameworks

Composable frontend frameworks empower the creation of component libraries that can be assembled into user-facing views. They commonly:

• Integrate JavaScript/TypeScript tightly with a templating language for web page generation.

• Eliminate the need for conventional servers, opting for static hosting or a blend of edge and serverless functions. This ensures content freshness at scale without compromising performance.

• Introduce specific functions or syntax for API content retrieval, which is then used in templating and dynamic page generation.

• Provide additional abstractions for functionalities such as redirects, meta-tags, image optimizations.

• Boast vibrant communities with a wealth of shared knowledge and experience. Predominantly, these frameworks are built atop UI libraries like React, Vue, and Svelte. Such libraries facilitate component composition by mediating data and state exchange within web browser constraints.

Highlighted Frameworks & Minimal Examples

Next.js (React): The Mature Mainstay

Next.js, a renowned React-based framework, boasts tools and abstractions for serverless functions, image optimization, cache control, and more. A recent enhancement in Next.js introduced a novel route definition method that utilizes React Server Components to decentralize data-fetching for individual components.

Minimal Example:

javascriptCopy code// src/app/page.tsx import { client } from "./lib/sanity"; function getPosts() { return client.fetch(`*[_type == "post"][0...10]`); } export default async function Home() { const posts = await getPosts(); // rest of the code }

Nuxt.js (Vue): Design-centric and Robust

Nuxt.js, reminiscent of Next.js but for Vue.js, offers tools for Vue developers. Its hallmark “single file components” pattern integrates logic, markup, and styling.

Minimal Example:

vueCopy code// app.vue <script setup> const query = groq`*[_type == "post"][0..10]`; const { data, refresh } = useSanityQuery(query); </script> <template> <!-- rest of the code --> </template>

Remix (React): Minimalistic and Potent

Remix, maintained by React Router's developers and recently acquired by Shopify, advocates a close affinity to Web APIs with essential abstractions.

Minimal Example:

jsxCopy code// ./app/routes/index.tsx import { useLoaderData } from "@remix-run/react"; import { client } from "~/lib/sanity"; export const loader = async () => { /* fetch code */ }; export default function Index() { const { posts } = useLoaderData(); // rest of the code }

SvelteKit (Svelte): Expedient and Efficient

SvelteKit, designed for Svelte enthusiasts, stands out for its efficient state management.

Minimal Example:

svelteCopy code<!-- src/routes/+page.svelte --> <script> export let data; </script> <!-- templating code -->

Astro: Hybrid Templating Powerhouse

Astro allows for a fusion of multiple templating languages, targeting content sites.

Minimal Example:

astroCopy code--- // src/pages/index.astro const posts = await useSanityClient().fetch(`*[_type == "post"][0...10]`); --- <!-- templating code -->

In Conclusion

As a team of developers we tend to be passionate about our tools, and our opinions on the “best” solutions may vary with each specific situation. So it’s important to state upfront that the best tool is the tool that is right for you and your team. All frameworks come with distinct advantages and limitations.

——

WQA builds world-class digital products for growth driven companies around the world. Working with Startups, Scale-ups and Enterprise, we design, build and scale digital products, experiences and platforms used by millions of people.

If you want to learn more about getting your product or platform to market faster chat to us or email us for a conversation and assessment of your unique digital context.