29 ms·

It's not just useful for SEO; isomorphic React apps render much quicker on first load and for deep linking into your app.

gildas 11y ago
> isomorphic React apps render much quicker on first load source?
- lotyrin 11y ago
  Evaluate + Layout + Render is not likely to be faster than Layout + Render for equivalent content.
  - lostPixels 11y ago
    More apt would be Fetch body + Fetch content + Evaluate + Layout + Render vs. Fetch body + Layout + Render
- phleet 11y ago
  This is a hard generalization to make, but it's certainly true in the worst network condition case. Even if your client-side rendering happens instantaneously and your JS is (magically) 1kB, it's still 2 round trips before you can render anything instead of 1 (well, 4 instead of 3 for TCP connect, SSL handshake, HTML response). On poor mobile connections, a roundtrip will be 500ms+, so if you can render in less time than that on the server, it'll feel faster.
  - deleted 11y ago
    [deleted]
- rofrol 11y ago
  Maybe this? https://signalvnoise.com/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui https://signalvnoise.com/posts/3112-how-basecamp-next-got-to...
  - gildas 11y ago
    Sorry if I sound pedantic but the major gain seems to be related to the use of a cache. It is never said that "React apps render much quicker on first load". Actually, the author almost admits that its application was taking 500ms to render a page on server-side.
- firasd 11y ago
  The issue is not so much about whether React components themselves are rendered on the client or server, it's about the network: all the JS and other data that has to be loaded in general before the browser can begin rendering. With React you can use the same component code used on the client side to generate HTML on the server side and send that down the wire for first page load. The browser doesn't have to sit there waiting for entire libraries to load and then start building <div>s.

gildas 11y ago

> isomorphic React apps render much quicker on first load source?

lotyrin 11y ago
Evaluate + Layout + Render is not likely to be faster than Layout + Render for equivalent content.
- lostPixels 11y ago
  More apt would be Fetch body + Fetch content + Evaluate + Layout + Render vs. Fetch body + Layout + Render
phleet 11y ago
This is a hard generalization to make, but it's certainly true in the worst network condition case. Even if your client-side rendering happens instantaneously and your JS is (magically) 1kB, it's still 2 round trips before you can render anything instead of 1 (well, 4 instead of 3 for TCP connect, SSL handshake, HTML response). On poor mobile connections, a roundtrip will be 500ms+, so if you can render in less time than that on the server, it'll feel faster.
- deleted 11y ago
  [deleted]
rofrol 11y ago
Maybe this? https://signalvnoise.com/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui https://signalvnoise.com/posts/3112-how-basecamp-next-got-to...
- gildas 11y ago
  Sorry if I sound pedantic but the major gain seems to be related to the use of a cache. It is never said that "React apps render much quicker on first load". Actually, the author almost admits that its application was taking 500ms to render a page on server-side.
firasd 11y ago
The issue is not so much about whether React components themselves are rendered on the client or server, it's about the network: all the JS and other data that has to be loaded in general before the browser can begin rendering. With React you can use the same component code used on the client side to generate HTML on the server side and send that down the wire for first page load. The browser doesn't have to sit there waiting for entire libraries to load and then start building <div>s.