Server-side React with Headless CMS – Exove
0 likes592 views
This document discusses using Next.js and a headless CMS to build server-side rendered React apps that improve SEO. Next.js allows building server-side rendered React apps using server-side rendering for better SEO than traditional single-page apps. A headless CMS like Contentful manages just the content without the front-end, providing an API for a separate front-end app like one built with Next.js to retrieve and display the content.
Server-side React with Headless CMS – Exove
- 2. React.js suffers from bad SEO Search engines cannot get the most out of websites that need Front-End JavaScript to display HTML
- 3. Next.js ● A JavaScript framework that lets you build server- side rendering web-apps using React ● Very simple to learn ● Easy integration with Node.js ● Works with JavaScript disabled on the browser
- 4. ● Pages folder ○ Each file represents a webpage route. E.g. about.js would render www.website.com/about ● Optional server.js file for routing and more advanced server-side handling Folder structure of a Next.js app
- 5. Headless Content Management System ● CMS without the front-end ● Manages just the content ● Needs a separate front-end application to show the content
- 6. ● Smarter, seamless, content management ● Consists of different content types ● API to connect to the application ● Doesn’t (necessarily) have an opinion on layout ● Has version control ○ Works as a JSON object to see version ID (among other things) Contentful
- 7. Code Example ● Static async getInitialProps() runs on the server ○ Must return an object that is passed on as props ● Html <head> element can be set in render, as well as any html tag ● Render method is run both on the server and in the front end