Headless SPA Server Side approach with Content Management Sysstem

Question

I am evaluating how is it possible to implement Server Side Rendering in SPA app with React and CMS as backend.

This is the approach I see Next.js suggest to have per-rendered and all most all CMS system suggests:

1. User request a page from react app running on Node server
2. Node server requests JSON data from CMS through fetch call
3. Then React App reads this JSON and transform HTML into String like renderToString() and sends the response back to the user.

The disadvantage of this approach is that if JSON data from CMS is huge then first request takes long time.

What alternate solution do you suggest?

Answer 1

Heyooo, Contentful DevRel here. 👋🏻

your concerns are absolutely valid.

And that's why Next.js just recently added advanced static pre-generation using getStaticProps. The goal is to tackle the long dynamic response times by pre-generating as much as possible. This way the user has a fast initial content paint, but can still enjoy all the dynamic benefits that come with a React application (Next.js usually follows an isomorphic JavaScript architecture)

The processing time you describe then is moved from dynamic request/response time into build-processes.

In general, when you're not dealing with millions of pages, I recommend giving static HTML a try. It makes applications often faster, safer, and more secure. For more complext and larger sites, Vercel is also experimenting with hybrid solutions that offer ways to only pre-generate certain pages. That's all very new though. :)