Explain Codes LogoExplain Codes Logo

Why is it a bad practice to return generated HTML instead of JSON? Or is it?

web-development
best-practices
performance
responsive-design
Nikita BarsukovbyNikita Barsukov·Oct 2, 2024
TLDR

Choosing JSON over inline HTML offers agility and flexibility. JSON represents raw data, enhancing client-side dynamics and server-side simplicity. Leveraging JSON, JavaScript on the client side can conveniently generate user interfaces, segregating data handling from presentation. Here's a tight snippet demonstrating HTML supplanting with JSON:

// Just like getting a coffee, get the data first, then enjoy! fetch('/api/data').then(res => res.json()).then(({ dynamicValue }) => { document.body.innerHTML = `<section>${dynamicValue}</section>`; // Voila! Fresh HTML! });

Employ this practice for an adaptable, maintainable web infrastructure.

Application needs and resources

The choice between rendering HTML or JSON depends on the requirements of your application and available resources.

Server and client resources

Evaluate the CPU load. How does your server handle the rendering of HTML compared to processing JSON? Consider the client-side effort to reconstruct HTML from JSON—it may be hefty for complex views. Identify scenarios where you might need to feed JSON data into various parts of the page—you'll gain from its reusability.

Development time

Take stock of the time spent developing a new front-end process compared to sticking to back-end rendering. JSON structures facilitate automated testing and validation, which help spot bugs and speed up debugging.

Response size

While using gzip compression can significantly reduce HTML and JSON response sizes, handling a hefty chunk of data may grow cumbersome with HTML. JSON allows for dynamic loading as and when needed.

Reactive content

Applications with features like chained selects or live searches typically use JSON. It provides raw data for the frontend to fetch only what's needed, minimizing transfer times.

JavaScript libraries

Libraries like React or Vue.js depend on JSON, allowing for the reactive changes in the Document Object Model.

Performance

Consider JSON when performance plays a critical role; being lightweight makes it a fast transfer choice and reduces server load.

A hybrid approach

There is no one-size-fits-all, and a hybrid approach can sometimes work best. Rendering the initial state as HTML from the server, while using JSON for subsequent updates, balances out performance and implementation ease.

Hybrid Approach Applications

Consider this when you have static pages with occasional dynamic updates. HTML from servers can provide initial rendering, while JSON powers the interactivity. A page that hosts both highly interactive and static parts can use both HTML and JSON in tandem.

Experiment and Evaluate

A hybrid model can indeed offer the best of both, yet, it requires an exploratory approach. Don't forget to request feedback on your implementation to ensure it's hitting the sweet spot.