Improving a Hugo [static] site

3-minute read

I am exploring ways to generally improve the UX of this site, softwavecr.com. Bear in mind it is built with Hugo(popular open-source static site generator). I am especially interested in adding React. Let’s take a look at the options and their pros and cons.

  1. React as a Progressive Enhancement (Sprinkling):

    Hugo generates the static HTML for most of your site (content, layout, etc.). You then use React to enhance specific parts of the page that require interactivity. Think of it as adding small React “islands” to your Hugo-generated site.
    Use cases: This is great for adding things like interactive forms, comments sections, dynamic search, or small UI elements that need client-side logic.
    Advantages: Simple to set up, minimal changes to your existing Hugo workflow, good for adding small bits of interactivity.
    Disadvantages: Not ideal for complex, single-page application (SPA) style interactions. Can lead to some code duplication if you’re not careful.

  2. React as a Full Client-Side Application (with Hugo as an API or Data Source):

    Hugo generates your content as data (JSON, YAML, or TOML). Your React application then fetches this data and renders the entire site client-side. Hugo essentially becomes a Content API.

    Use cases: This is suitable for more complex sites where you want the full power of React for routing, state management, and dynamic interactions.
    Advantages: Leverages the full power of React, allows for SPA-like experiences.
    Disadvantages: More complex setup, requires you to manage routing and data fetching in React. Initial page load might be slightly slower as data needs to be fetched. SEO can be handled through server-side rendering or pre-rendering.

  3. Hybrid Approach (Pre-rendering with React Hydration):

    Hugo generates the initial HTML. React then hydrates this HTML on the client-side, making it interactive. This combines the benefits of static site generation (fast initial load) with React’s interactivity.
    Use cases: A good balance for sites that need a good initial load time but also require some dynamic behavior.
    Advantages: Best of both worlds: fast initial load and interactive experience.
    Disadvantages: More complex to set up, requires familiarity with frameworks like Next.js.

  4. Headless CMS (Hugo as a Headless CMS):

    Hugo acts as a content repository. You build a completely separate React frontend that fetches content from Hugo. This is similar to option 2, but often involves a more formal API layer (which you might have to build yourself or use a tool for).
    Use cases: Decoupled architecture, allows you to use Hugo for content management and React for maximum frontend flexibility.
    Advantages: Highly flexible, decoupled architecture.
    Disadvantages: Most complex setup, requires strong understanding of API design.

Option 3 is the winner at the moment, since the Softwavecr.com site is already live, leveraging React for dynamic pages and enhanced interactivity is a smart way to add functionality without completely rebuilding. Some possible helper tools are Redux (or a similar state management library) and a CSS framework like Material UI or Bootstrap.

More to come…