Responsive Isomorphic Website with React, GraphQL, CSS Modules

Had the privilege of creating the public facing website for the company I worked for, Blink. Since it's another greenfield site and React was strongly adopted by the company, it made a lot of sense to also construct the website using React.

The content had to be editable by the marketing team, but since the parts of the website don't fit in to a classic page type system that is popular on Wordpress, I integrated a third party content management platform, Contentful (a headless CMS provider, I'll review them separately later). Since the website would be isomorphic, I had a Node Express server at my disposal, so I immediately got to work adding a GraphQL API that would be responsible for serving up the various strings and images stored in the CMS for the specific elements of these bespoke built pages.

GraphQL is a dream to work with, and makes querying specific pieces of data very easy due to its query syntax and strong schema models. From there, I simply had the server write a simple router function to find the relevant page and populate the component tree like any other isomorphic page, the resulting HTML is then sent as a string to the client and rendered almost instantly.  This is because the browser has everything it needs to start rendering and no scripts to download to block this render process.  Once the page has rendered, a client side app in React is downloaded asynchronously so that when the user navigates to the next page, only the parts of the page required to are updated, thus forward and backward navigations are also instantaneous.

GraphQL benefits this process further when on client as it only needs to request the strings for the specific parts of the page being rendered, and not existing elements like the header, navigation and footer - since they are already rendered.

I implemented CSS Modules in this project since I as starting from scratch, in this system there are no global stylesheets pulled in, but rather a single style block in the head that contained only the CSS required for rendering the specific components on the page.  This is the first time I've used this technique and am so pleased with the results. It basically means that the page can be fully rendered by the client without any JavaScript, and the rendering is almost instant since there is no separate or excessive global CSS styles to download.  CSS Modules are great for this because class names become 'computer managed' meaning I am free to use simple names such as .header without worrying about collisions with other components that might use the same class name elsewhere.