CMS React slack channel: #cms-react

Introduction ​

Welcome! ​

Thank you for taking the time to explore this new direction for the HubSpot CMS! As always our goal is to solve for our customers so we welcome any and all feedback. Chat away in #cms-js-rendering with other HubSpot developers who are pushing forward with React on the HubSpot CMS.

The easiest way to get started is by following the Hello World example guide. Once you've acquainted yourself with React modules and partials use the API reference to learn more. If you are new to JavaScript or React, please check out the “Learning links” execution in the appendix below.

What are the new things? ​

React modules and partials are new building blocks you can use to write React and JavaScript instead of HubL inside the HubSpot CMS. Note this doesn’t mean you will switch entirely away from HubL immediately, rather we want to provide a pathway to code React and render that on both on the server and client. JS modules and partials are built from React components and can directly be referenced via HubL tags in your templates.

In addition to stitching server-rendered React components into the HTML generated by HubL, JS modules and partials support client-side interactivity with islands. Similar to the islands concept from Astro, Fresh, and others, you can add an <Island /> inside your JS module or partial to establish a component that is rendered on both the server and client and is automatically code-split. In addition to allowing you to reuse JavaScript code between the server and browser, islands help you write fast websites by giving you precise control over what JavaScript is shipped to the browser and when it runs.

Benefits ​

Using React instead of HubL comes with lots of benefits, including component composability, code reuse, broader community resources, and real access to JavaScript on the server. While this release is just a start, our hope is to make developing on the HubSpot CMS feel like modern web development. Plus we want to give you technologies that scale with you, all the way from simple static pages to complex interactive and dynamic web applications.

Rendering React on the server means that there is far less of a technological divide between your code that serves the initial page HTML and your interactive browser code. Previously, as you created more complex and interactive pages, that would either lead to:

• More and more client-side JavaScript that "blocked" and slowed down the page until it was all downloaded and executed
• Having to replicate or dually maintain UI logic across HubL and JavaScript in order to have server HTML that is immediately visible and can later interact to user input

In other words, you often needed to choose between:

• Accepting worse performance that comes from keeping your more complex module or component logic code only in the browser
• Accepting the complexity and maintenance burden that comes from splitting a module or component's logic across HubL and JavaScript

However when server-side rendering (SSR) JavaScript, you no longer have to make that trade-off. You can code complex interactive components which either share code with or are directly rendered on the server themselves. When paired with the islands model, we believe you'll be able to more easily code web experiences that have good Core Web Vital scores (LCP, FID, CLS) even as your clients and organizations demand more and more.

Additionally by building on top of JavaScript and an open source framework (React), you'll have better access to the wealth of tooling, libraries, example code, community answers, etc available in the broader ecosystem. That will make new developers get up to speed faster, enable you to create better experiences with less time and effort, and give you better and shinier toys to code with. For example, since JS modules and partials are built on top of Vite, you'll get things like ESM, TypeScript, JSX, CSS modules, and tree-shaking out of the box.

Features missing and caveats ​

Note, React modules & partials are still in development and we are actively working on many things. Here is a list of some features that we are actively implementing but are not fully finished yet:

• More performance optimizations
• Support for importing JS Modules into JS Partials
• Support for fetching non-HubSpot data