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 may be extra dependable. Whereas the 2 types are sometimes pitted towards one another, the reality is many trendy purposes mix these types. Ideally, we need to maximize the strengths and decrease the weaknesses of every one. It is not uncommon to load as a lot content material as attainable statically, after which apply the dynamic components the place they make an influence. In each circumstances, you need to apply the perfect practices for the model you’re utilizing.
That’s the thought, anyway. However anybody who has got down to code a blended software can let you know it will get tough quick! Astro employs an islands structure to make the hybrid format extra manageable. Islands primarily divvy up the applying structure into discrete elements, which might then be loaded utilizing greatest practices for the given sort of content material.
Taking the to-do app as our instance, it is smart to render any framing content material (like headings) in a manner that helps most pace and Website positioning-friendliness. Then, for the dynamic to-do checklist, we’ve got a couple of choices. We might use a reactive framework like React in full SPA mode, during which case we’d ship the shopper belongings over after which load the information from a server API. Another choice is to make use of the identical element and pre-render it on the server, a type of middle-ground between SPA and MPA. Another choice altogether is utilizing plain JavaScript or HTMX to create and render the checklist.
