Angular NASA APOD

Why this exists

I wanted to understand Angular’s server-side rendering by shipping something with it rather than reading about it. NASA’s APOD API is a good forcing function: an external dependency I do not control, image-heavy responses, and a rate limit that punishes naive fetching.

What it does

Pulls ten random Astronomy Pictures of the Day and renders them as a gallery — each with its title, date, and NASA’s own explanation.

What I took from it

SSR is mostly a data-fetching problem. The interesting part is not rendering on the server, it is deciding what gets fetched there versus in the browser, and making sure the client does not immediately re-request everything the server already resolved.

Image-heavy pages punish you for defaults. APOD serves full-resolution astronomy photography. Without explicit sizing and lazy loading, the gallery is a layout-shift generator — which is exactly the lesson that shaped how images are handled on the site you are reading now.

Tailwind pairs well with Angular’s component model. Styles stay next to the markup they belong to, which keeps a component genuinely self-contained.