If your content is always fetched from a single geographical location, there’s no point in building a website with a serverless architecture. Dato headless CMS offers your content from a CDN with edges all around the globe, minimizing your React app latency.
GraphQL Content API
Ask for what you need, get exactly that
Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads. The perfect solution for a React CMSRead more about our GraphQL API
{}
React images
State of the art for responsive and progressive images
Serving optimized images is incredibly hard, but our CMS is optimized for React. Using our GraphQL Content API and our React component, you can implement lazy loaded, responsive images in one line of code. Avoid any layout jumping, offer instant previews of images while they load. It’s like magic.
React CMS example
DatoCMS Preview API = content editors happiness
If you're using React as a single-page application (SPA), you can easily switch GraphQL endpoint to fetch real-time previews of the changes you make to any content stored in Dato CMS (text, images, videos). Give it a try, it's magic!
// src/App.jsimport { GraphQLClient, ClientContext } from 'graphql-hooks'const endpoint = process.env.PREVIEW_MODE ?'https://graphql.datocms.com/preview' :'https://graphql.datocms.com/';const client = new GraphQLClient({ url: endpoint });function App() {return (<ClientContext.Provider value={client}><Movie /></ClientContext.Provider>);}// src/Movie.jsimport React from "react";import { useQuery } from "graphql-hooks";const Movie = () => {const { loading, error, data } = useQuery(query: `{movie(filter: { title: { eq: "Inception" } }) {titlereleaseDateactors {name}}}`);if (loading) return <div>Loading...</div>;if (error) return <div>Something bad happened</div>;return (<div><h1>{data.movie.title}</h1>{/* ... */}</div>);};
A component-centric CMS, just like React
Reacts makes using components easy right from the get-go, and you should expect the same from your CMS. A component-based approach allows developers to clearly divide work amongst themselves and progress without having to rely on each other every step of the way.