SSR - mrsekut-p

SSR

Server Side Rendering

requestがあるたびにServer上でHTMLをPre-renderingし、それを返却する

HTMLまで生成してしまうので、でかいJSをclientに返す必要がなくなる

First Paint(FP)とFirst Contentful Paint(FCP)とTTIが速くなる

SEOで不利を背負わない

完全なページを返すのでhydrationにおけるuncanny valleyは生じない

なぜFirst Paint(FP)が速くなるのか

HTMLまで生成してしまうので、Clientに返却するJSサイズが減る

browserが解析するJSが減るという意味でも速くなる

textと<link>をユーザーのブラウザへ送信するだけだから

<link>による外部リソースはclientで読み込まれる #??

ServerとData Storeの物理的な距離が近いという構成であればその分も速くなる ref

SPAとの違い

1発目のrequestのときのみが異なる

Server側でrenderingして生成したHTMLを返す

2回目以降のrequestでの挙動はSPAと同じ

APIを叩いてデータだけを取得し、差分を見てbrwoser上でrendering

これを読んだ感じ、本来の意味のSSRはこんなに賢くない

毎回full reloadする感じになる

https://reactjs.org/docs/react-dom-server.html

参考

Server-side Rendering

Rendering on the Web

https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html

https://qiita.com/ryokkkke/items/1bd858a5d6f261a9342a

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3

https://dev.to/addyosmani/speed-up-next-page-navigations-with-prefetching-4285

https://blog.logrocket.com/why-you-should-render-react-on-the-server-side-a50507163b79

https://medium.com/airbnb-engineering/operationalizing-node-js-for-server-side-rendering-c5ba718acfc9