MPAs are extra within the custom of Net 1.0: a group of static pages linked with hyperlinks. Whereas SPAs are extra trendy and dynamic, MPAs could be extra dependable. Whereas the 2 kinds are sometimes pitted towards one another, the reality is many trendy purposes mix these kinds. Ideally, we need to maximize the strengths and decrease the weaknesses of every one. It’s common to load as a lot content material as doable statically, after which apply the dynamic components the place they make an impression. In each circumstances, you need to apply the most effective practices for the type you might be utilizing.
That’s the concept, anyway. However anybody who has got down to code a blended software can let you know it will get difficult quick! Astro employs an islands structure to make the hybrid format extra manageable. Islands basically divvy up the applying structure into discrete elements, which may then be loaded utilizing greatest practices for the given kind of content material.
Taking the to-do app as our instance, it is sensible to render any framing content material (like headings) in a manner that helps most velocity and Search engine optimisation-friendliness. Then, for the dynamic to-do listing, we’ve just a few choices. We may use a reactive framework like React in full SPA mode, through which case we’d ship the shopper property over after which load the information from a server API. Another choice is to make use of the identical part and pre-render it on the server, a sort of middle-ground between SPA and MPA. Another choice altogether is utilizing plain JavaScript or HTMX to create and render the listing.
