This PR replaces all instances of client:only with client:load, addressing #45.
The difference here is that client:only components are fetched by the browser at runtime, through a separate network request for each component contained within what Astro calls an island. This causes a slight delay, especially in deployed environments, as the browser makes dozens of requests for each Astro island.
client:load will include the component in the initial statically generated page, so it's already there on page load. It's then hydrated with whatever props/data are provided at runtime. This is only possible if the component has the props and data it needs to render at the time of page generation, and if the component's first clientside render has the same DOM tree as the server-side render. To accomodate these requirements, this PR adds a couple things:
new defaultState object that components can read from when the player state doesn't exist (i.e. during serverside rendering)
some default values in certain components to satisfy Astro's requirement that the first client render should be the same as the server
Whichever PR between #75 and this one is merged second will need to be updated, as that PR adds a few new client:only spots.
Summary
This PR replaces all instances of
client:onlywithclient:load, addressing #45.The difference here is that
client:onlycomponents are fetched by the browser at runtime, through a separate network request for each component contained within what Astro calls an island. This causes a slight delay, especially in deployed environments, as the browser makes dozens of requests for each Astro island.client:loadwill include the component in the initial statically generated page, so it's already there on page load. It's then hydrated with whatever props/data are provided at runtime. This is only possible if the component has the props and data it needs to render at the time of page generation, and if the component's first clientside render has the same DOM tree as the server-side render. To accomodate these requirements, this PR adds a couple things:defaultStateobject that components can read from when the player state doesn't exist (i.e. during serverside rendering)Whichever PR between #75 and this one is merged second will need to be updated, as that PR adds a few new
client:onlyspots.