Today I Learned - Rocky Kev

TIL Server-side rendering vs Static Generation

POSTED ON:

TAGS: optimization

There's two terms web developers will hear frequently:

Server Side Rendering (SSR)

Server-side sends a fully rendered page to the client.

Server Side rendering (img via https://www.educative.io/edpresso/what-is-server-side-rendering)

For example - visiting a site that's SSR will send you code like this.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="http://example.testsite.com/other.html.">Link</a>
  </body>
</html>

You can interact with it immediately.

Server-side:

PROS:

CONS:

Client Side Rendering (CSR)

Client Side rendering (img via https://www.educative.io/edpresso/what-is-server-side-rendering)

For example - visiting a site with CSR will send you something like this

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Website</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

You cannot interact with the site, and instead will need to wait for all of the JS to download, to allow the SPA framework to operate.

If that sounds like a terrible experience, it has it's trade-offs.
Both React & Vue by default are Client Side Rendering (more about that later). React/Vue offload an incredible amount of complexity compared to trying to write html/css/js without it.

Client-side:

PROS:

CONS:

The flip-side of things

I've been a huge fan of Nuxt.js, which has options that can pre-render your Vue apps into either SSR or leave it by default to CSR.

It uses a strategy called Static Generation, which, in layman terms... flattens out your Vue App's pages into it's core basic html/css/js elements. It's also done during the build process.

REFERENCES:
https://www.educative.io/edpresso/what-is-server-side-rendering

https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

Related TILs

Tagged: optimization

TIL Performance tests

While doing performance tests, I was curious how long a loop was running. I used the performance.now() trick.

TIL self-hosting your own Google Fonts

I'm all for self-hosting. So seeing this question asked 'Should you self-host Google Fonts?', my immediate answer is ABSOLUTELY. But here's the edge-cases.

TIL loading third-party scripts onto service workers

An alternative to self-hosting scripts would be using Service Workers to cache them. This can give you greater control over how often they are re-fetched from the network. This could also be used to create a loading strategy where requests for non-essential third parties are throttled until the page reaches a key user moment.