Nuxt Flashcards
Explain the difference between server-side rendering (SSR) and static site generation (SSG). Explain how a hybrid between the two works.
Server-side rendering is when the web page is rendered on the server and sent to the client. This is faster for initial page load times for a few reasons.
The server can leverage techniques like caching pre-rendered content. The server generates the web page when the first client requests it, then other requests will be much faster because it can send the cached page contents to them quickly. This includes the fully rendered pages and also data from API responses. Caching still takes place on the client, but without SSR, every client would have a slow initial page load time before the caching effects would take place. With SSR, the caching takes place on both the server (on the first client request) and each individual client after their first visit. (Note: Servers must invalidate cached content when it is not up-to-date so pages will retrieve the up-to-date information.)
Servers usually utilize more powerful hardware to complete the web page generation as well. This allows for faster processing and handling multiple requests simultaneously (this refers to both client requests for the site and also requests the server makes to APIs, for example, to generate the page). This can make a significant difference especially when some clients are run on old, slow devices like old smart phones. This provides high availability and reliability, which boosts user experience and SEO.
Load balancing also distributes computational power to whatever server is receiving the most requests. Although this applies to both SSR and client side rendering (CSR), it emphasizes that although the server is performing more computations, it has safeguards in place to do it reliably regardless of the amount of traffic it gets.
Finally, SSR is beneficial for SEO because page crawlers have the fully rendered web page available when they visit the site since its fully rendered on the server before being sent. The first crawlers that were made didn’t have the ability to execute JavaScript, so without SSR they couldn’t see the actual web page, which means they couldn’t index them. Current search engines may have crawlers that can execute JavaScript, but it takes a very long time and a ton of computational resources given the amount of web pages that exist. If generating the page also includes API calls that take too long, the crawler may timeout and not have the full web page as well. (Note: Content that is loaded from user interaction may not be mimicked by the crawler, which can cause it to miss content. Even if your page uses SSR, dynamically loaded content, like loading more content after scrolling on social media, technically has an element of CSR since the client is rendering the content at this point.)
Static site generation is the same as SSR in that the full web page is rendered on the server before being sent to the client. The only difference is that the information on that site is static and will only update once the developer builds an updated version and replaces the old static files with new ones. This is good for sites that don’t have much dynamic content because the server doesn’t have the constant work of checking to see if there is new content available. If I have a blog services that is only available to people paying monthly and a client wants to keep the current blogs when they buy it outright, I can make an SSG site with those blogs and it’ll have them without having to change the site itself to exclude them from getting more blogs on their site.
A hybrid is when you decided (on nuxt3 for example) which pages are SSR and SSG, offering the speed of SSG and the dynamic benefits of SSR based on the needs of the page.
