1

I am trying to build a SPA.

There are some requirements I am desperately trying to achieve. I have an index.html file as a layout which has some templates defined. The rendering of that works as expected through htmx calls.

The issues I am facing are the following:

  1. I want to enable routes to dynamic content e.g.: I have a list with items. When clicking on an item I want to render a template that shows more information on that item. In general that works but now I also want the URL to change to .../item/:id without re-rendering the entire page
  2. I also want to be able to access said item information through the link directly and have the layout(index.html) rendering as well as I need it for loading styles and scripts

I researched a lot and tried various different things. I also switched from using gin to echo now as I hoped for the integrated rendering to take care of that stuff but without any luck so far

1
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Commented Sep 1 at 18:39

2 Answers 2

2

In general that works but now I also want the URL to change to .../item/:id without re-rendering the entire page

Then use the History API (generally pushState, but maybe replaceState) to set the URL at the same time as you AJAX in the new content, and make sure to add a popstate handler to load in the correct content when the user navigates with the forward or back buttons. This is completely a frontend thing.

I also want to be able to access said item information through the link directly and have the layout(index.html) rendering as well as I need it for loading styles and scripts

Then you either

  1. Have your server send back the same SPA code for the .../item/:id URL as it does for /, and have your client-side code parse window.location to figure out that it needs to go back and hit the API to load in some specific piece of content (this has fundamentally nothing to do with Go or which Go web framework you're using). Or:

  2. Have your server send back a version of the same SPA code that already has that item rendered when it gets a request for .../item/:id, which is simply a matter of writing the code to render the template into the page; there's no magic. This is how we did it 10-15 years ago, under the name of "PJAX", and if you do it right it results in a better, faster user experience as well as being SEO-friendly, but because it requires writing more code, and thinking about more possible transitions, it's been largely forgotten in favor of frontend bloat.

Sign up to request clarification or add additional context in comments.

3 Comments

The first part fixed my Issue regarding the URL change so thanks a lot for that already. Regarding the second part I'm still trying to figure out how to render the template as supposed and inject the content I need. Currently I am either getting my layout not to load as supposed or the layout is being nested inside itself again...
or the content is being appended to the end of the html when I pre-render the layout
you can just check if the request is from htmx or not. you can do that by checking hx-request header is true, if so render the fragment only, if not render the index.html
0

I went with a workaround as I seem to have reached the limitations of go templ. While injecting content into a rendered template is possible, I faced the issue, that when trying to reach .../item/:id without previously visiting .../items/ the other page contents are not being rendered.

So I stored the data that is being displayed in a session and extract it when redirecting and rendering the new page. That way the user does not notice the reload of the contents that should remain the same when redirecting as I can preload the data from the session storage into the template.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.