CODEWITHSUNDEEP
javascript
Mojimi
Mojimi

Reputation: 3161

Techniques to send javascript objects from server without parsing from HTML?

I'm not sure if I worded this correctly, but let me try to explain it.

I'm often finding myself in a situation that my server will send the following html snippet on a page request :

<div id="my-values" data-values="[1,2,3,4,5]">Values</div>

And then javascript uses JSON.parse to use those values to generate something.

But I always feel like I'm taking so much unecessary steps.

1) Server serializes the values into the html and sends it

2) Client Javascript does a query selector to find the element that holds the values

3) Client Javascript then parses the values back to be useable

Is there a way to skip the serialization/deserialization?

I have control over both server and client code so there has to be a better way of them communicating.

Hope I have been clear, maybe there is a name for this common issue.

Please note that I'm discarding things like SPA, I'm looking for server-side rendering and maximum SEO efficiency.

One idea I thought about is, instead of the server parsing the values into HTML, it could parse into javascript, a sort of javascript template (sounds weird and wrong)

(tagging flask as that's the server I'm using but doesn't matter for the answer)

Upvotes: 1

Views: 53

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371049

I think what you're doing currently is already one of the best options.

Is there a way to skip the serialization/deserialization?

Any option will necessarily involve serialization and deserialization somewhere - the data is sent over the internet, after all, and objects can't be sent, only strings (possibly in the form of a .js file, possibly as HTML) which then gets deserialized and run.

Another possibility is to make a network request on pageload, allowing you to request the values:

fetch('get-data-values')
  .then(response => response.json())
  .then((values) => {
    // do stuff
  });

This works, but requires an extra delay before the values can be processed. A single pageload would require two connections, rather than one.

Another possibility is to have your backend serve inline Javascript which defines the variable you use, eg:

<script>
var values = [1,2,3,4,5];
</script>

Dynamically generated Javascript often isn't that pretty, though, and often makes for smelly code.

You can also do what you're doing currently, which is to embed the information in an HTML tag, which (IMO) is perfectly fine, and possibly the best option - it's quite maintainable doesn't require an extra request.

For large amounts of data, you can consider using <script type="application/json"> rather than data- attributes. It's very similar, you just put the data inside the tag, rather than as an attribute:

const values = JSON.parse(document.querySelector('#values').textContent);
console.log(values);
<script id="values" type="application/json">[1,2,3,4,5]</script>

(the type="application/json" can be anything, as long as it isn't type="javascript" - a Javascript type or an empty type will mean the browser attempts to run the code)

Upvotes: 2

Related Questions