Nuxt.js: SSR Streaming / improve Time to First Byte

Created on 13 Jan 2019 · 4Comments · Source: nuxt/nuxt.js

What problem does this feature solve?

Although there are some caveats using streaming in SSR.

It's still possible to stream some important tags in the <head> section, such as:

<link rel="dns-prefetch"> tags
<link rel="preconnect"> tags
<link rel="prefetch"> tags
<link rel="preload"> tags

Maybe even more, such as default layout and theme styles.

This will improve page loading time since the browser has more time to preconnect, preload and prefetch connections and resources.

What does the proposed changes look like?

Change the order of the HTML template so that tags which are not dependent of any dynamic components are in front.
Change the vue-renderer package in a way that it sends part of the HTML as soon as possible.

_{This feature request is available on Nuxt community (#c8460)}

feature-request

Source

Timkor

👍19 🚀3 ❤1

Most helpful comment

Streaming SSR might be difficult. Even for the head, because head functions from components can change it.

Progressive hydration might not improve the TTFB but the TTI and input latency.

There ishttps://github.com/maoberlehner/vue-lazy-hydration / https://github.com/znck/lazy-hydration for that ☺️

manniL on 12 Feb 2019

❤4

All 4 comments

Seems like "preconnect" works that way:

nuxt.config.js:

link: [
      {
        rel: "preconnect",
        href: "https://cdn.domain.com/",
        crossorigin: true
      }
]

Other tags I have not tested

MarvinMiles on 18 Jan 2019

Seems like "preconnect" works that way:

nuxt.config.js:
link: [
      {
        rel: "preconnect",
        href: "https://cdn.domain.com/",
        crossorigin: true
      }
]
Other tags I have not tested

Yes, that's true. I actually mean that the Vue Server Renderer sends that information before rendering the page. So that the browser has a additional +- 500ms to preconnect, prefetch and to do other stuff (depending on the SSR performance of your project).

Will also improve Time to First Byte. Which is a test factor for Lighthouse, which implies that it might also be one of the many (in)direct ranking factors of Google Search, although Google states they did not do so.

Overall it would help Pagespeed, and therefore CTO, and therefor also SEO.

Timkor on 21 Jan 2019

Streaming SSR might be difficult. Even for the head, because head functions from components can change it.

Progressive hydration might not improve the TTFB but the TTI and input latency.

There ishttps://github.com/maoberlehner/vue-lazy-hydration / https://github.com/znck/lazy-hydration for that ☺️

manniL on 12 Feb 2019

❤4

I've never tried it, but you should also be able to do much (if not all) of these as http headers. That may make them a tick faster.

example: https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ