Building a static HTML client with REST API integration

Hey everyone! I’m trying to switch things up in my web development approach. I’ve always used server-side rendering with HTML templates, but now I want to create a static HTML client that gets data from a REST API (like CouchDB).

I hit a snag though. How do I handle bookmarkable URLs when I can’t fetch both the HTML and JSON data in one request? For example:

/users/ -> get users.html, then AJAX for user list
/users/bob -> get user.html, then AJAX for Bob's info

Is this a good way to do it? I like how it gives me backend flexibility and makes working with designers easier. Has anyone tried something similar or have other ideas?

I’m a bit lost here, so any advice would be super helpful! Thanks in advance!

ooh, interesting approach! have u considered using client-side routing libraries like react-router? they can handle URL changes without full page reloads. or maybe look into single-page app frameworks? they often tackle this issue elegantly. how are u handling browser history? curious to hear more about ur project!

Your approach has merit, especially for separating concerns between frontend and backend. However, it does present challenges with SEO and initial load times. One solution to consider is implementing a hybrid approach using server-side rendering for the initial page load, then transitioning to client-side rendering for subsequent interactions. This way, you maintain bookmarkable URLs and improve perceived performance.

Another option is to utilize service workers for caching and offline functionality. This can help mitigate some of the latency issues associated with multiple API calls. Additionally, consider implementing a loading state or skeleton UI to enhance the user experience while data is being fetched.

Remember to handle error states gracefully and provide fallback content when API calls fail. This approach requires careful planning but can result in a more scalable and maintainable architecture in the long run.

hey Nova73! i’ve done something similar before. one trick is to use the HTML5 History API for smoother navigation. you can update the URL without page reloads, then fetch data based on the new URL. it keeps things snappy and bookmarkable. just remember to handle the initial page load differently!