ep.76 React Server Componentsはサーバーサイドの新たなゲームチェンジャー？ | UIT INSIDE

2021/02/12 に公開1719 views

このエピソードについて

@spring_rainingが、@G4RDSに期待のReact Server ComponentsについてやReact公式が開発中のreact-fetchについて聞きました。

Guest

@G4RDS
- LINE フロントエンドエンジニア
- 2020年夏にインターン後アルバイト中

React Server Components

@G4RDSによる詳説記事
- React Server Components 総まとめ https://zenn.dev/g4rds/articles/287c53498d17a1
RFC: React Server Components https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md
Blog https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
2020年の年末に発表されたReactが調査中の新しい機能
- 一部のコンポーネントをサーバーサイドでレンダリングする
社内勉強会での意見・感想
- 既存技術であるServer Side Renderingとの違い
- PHPの再来？ Reactの普及の結果？

react-fetch

React公式のfetchライブラリ (開発中)
- https://github.com/facebook/react/tree/9198a5cec0936a21a5ba194a22fcbac03eba5d1d/packages/react-fetch
- Concurrent modeと組み合わせて使うため、リクエスト送信後にPromiseをthrowする
- Server Componentsとも相性が良い

Refs

LINE 新卒採用 2022
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:02
こんにちは、UITのはめです。今回もUIT INSIDEを始めたいと思います。

Guest 00:08
テンサイドは、ユーザーインターフェースと、テクノロジーを愛する開発のためのホットキャストです。

Guest 00:15
最新のウェブ表示の動向や開発、フレームワークの変遷、

Guest 00:19
uiやウェックに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。

Guest 00:27
ハッシュタグはシャープ、UIT、アンダースコアインサイド、エピソードのご意見やご感想は一部でもお待ちしております。ぜひぜひツイートしてください。

Guest 00:38
今回はですねえーズバリアとサーバーコンポーネンツについて。え、今回、潜水さんとお話ししていきたいと思います。

Guest 00:47
uytでは、javascriptに関する勉強会を毎週行っているのですが、その中で先週ですね。は、

Guest 00:57
逆とサーバーコンポンレンスについて、セシさんが主導してえ、調査を行ってもらい、それについての結果について議論しました。

Guest 01:05
で、せっかくなので、今回はこの社内勉強会での内容について、インサイドでも

Guest 01:12
取り上げられたらと思いまして、今回収録したいと思いますそれでは、セスさんよろしくお願いします

Guest 01:18
よろしくお願いします。

2. React Server Componentsについて 01:25

Guest 01:25
はい

Guest 01:26
というわけで、まずいきなりなっちゃいます。けれども、センスさんにリアクトサーバーコンポレンズについて、調査してもらいましたので、ま、それの内容について、

Guest 01:36
まずは振り返ってみたいと思いますそれではどうぞお願いします。

Guest 01:40
はいはい、リアクトサーバーコンポーネンツという新しい技術が、去年の12月

Guest 01:50
あたりに発表された

Guest 01:53
ものです。で、リアクトサーバーコンポーネンツっていうのは、リアクトコンポーネントをサーバーサイドでレンダリングするっていう新しい技術

Guest 02:02
で、発表された時にすごく話題になって、皆さんご存じの方もいらっしゃると思います。

Guest 02:10
で、リャクトサーバーコンポーネンツの特徴として、

Guest 02:15
一部のコンポーネントだけをサーバーサイドで連打することで、パフォーパフォーマンスをあげようっていうのが目的なのが特徴です。

Guest 02:27
あと、コンカレントモードにも対応していて、サーバーサイドでレンダリング中にサスペンドが発生した場合、

Guest 02:35
サスペンスのホールバックがクライアントに即座に返されつつ、

Guest 02:40
サーバー側でそのサスペンドが解決次第。リレンダリングが走り、その結果がクライアントに後からストリームされるみたい

Guest 02:50
感じのか、コンカネットモードに対応してるということが特徴です。

Guest 02:56
はいで、このサーバーサイドで、コンポーネントレンダリングするっていうことで、あのま、その

Guest 03:05
クライアントでレンダリングするか、サーバーでレンダリングするかっていうことをまあ決める必要があると思うんですけど、それについてはどういう感じで決めるって言いますかね。

Guest 03:15
はい、そうですね、まず、サーバーでレンダリングできるものと、クライアントでしかレンダリングできないものはいっていうのがありまして。

Guest 03:24
と、従来のコンポーネントはクライアントでしかレンダリングされないコンポーネントになりますので。

Guest 03:31
そういった普通従来のコンポーネントのことを、レフトサーバーコンポーネンツでは、クライアントコンポーネント

Guest 03:40
と呼ぶようになって、その逆でサーバーでしかレンダリングできないコンポーネントは、サーバーコンポーネントと呼ばれるように

Guest 03:48
なるです。で、アーバーコンポーネントとクライアントコンポーネントは、拡張子で、分けるようになっていて、

Guest 03:56
ドットサーバードットジェースだったら、サーバーコンポーネントドット、クラインドドットェースだったら、クラインドコンポーネントみたいな感じで分ける感じですね。

Guest 04:08
で、それらの特徴として、

Guest 04:12
サーバーでレンダリングするので、え、ステトが持てないステトは持てないんですね。

Guest 04:20
サーバで1度しかレンダリングしないので、ステートが持てず、またあとユズフェクトとかユーズレイアウト、エフェクトとか。

Guest 04:29
そういったライフライフ、サイクル系のフックも使えないという特徴があります。

Guest 04:38
そういったサーバーコンポーネントは、基本的にフックが使えない。既に用意されてるリアとの標準のすフックが使えないという制約が

Guest 04:48
ありますね。

Guest 04:50
その代わりに、クライアントコンポーネントは従来通りステートも持てるし、えーユーゼフェクトとかも使える

Guest 04:58
あとま、イベントもハンドルできるし、みたいな感じですね。

Guest 05:04
なので、ステートを持ったりしたい場合には、クライアントコンポーネント。そうじゃなくて、まい、

Guest 05:12
プロップに対して1位なち。え要素を返すような。コンポーネントの場合だったら、サーバーコンポネットにできる

Guest 05:21
みたいな感じの使い分けになるかなと思います。

Guest 05:26
なるほど、これはえ。サーバーコンポーレンズとクライアントコンポーレンスはどちらか

Guest 05:34
という感じではなくて、シアードコンポーネンツでしたっけ。はい、これは、はい、両方使えるっていう感じのものもあったり。

Guest 05:45
そうですね。もう1つ、シェシェアードコンポーネントという種類があって、

Guest 05:50
シアードコンポーネントというのは、サーバーでも、クライアントでも、どちらでもレンダリング可能という特殊なコンポーネントです。

Guest 05:58
なので、サーバーコンポーネントの中で呼ばれた場合、サーバーコンポーネントが回数

Guest 06:06
要素たちの中にシェアードコンポーネントがいる場合、

Guest 06:09
そのコンポーネントはサーバーコンポーネントとして振る舞うし、逆にクライアントから呼ばれた場合は、クライアントコンポーネントとして振る舞うという特殊な

Guest 06:19
コンポーネントが新たに追加されるものですね。はいで、シェアドコンポーネントはサーバーでもレンダリング可能なので、サーバーコンポーネンツの

Guest 06:28
制約も持ちます。なので、生徒は持てないようなコンポネートになります。

Guest 06:35
なるほど、ありがとうございますはい、そうですね、結構サーバーコンポレンズ、そのステートモテないので

Guest 06:42
あれです。完全にそのステートレスなものじゃないといけないっていう感じで、結構なんて、すかし、縛りプレイみたいな感じに感じのポポメントですけれども、

Guest 06:52
結構ま使い分けとしてはどういう感じですかね。クライアントコンポーネンツがサーバコンポーネンツも迷った時は

Guest 07:03
そうですね。基本的には、サーバーコンポーネントにした方が色々メリットがあるので、ああ、はい、基本的にはサーバーコンポーネントにするでいいのかなと僕は思っているんですが、

Guest 07:14
そん中でどうしてもクライアントコンポネットにしかできない場合には、クライアントコンポネットにするみたいな使い方がいいのかなと思ってます。

Guest 07:24
で、シェアドコンポーネントに関しては、クライアントコ、クライアントコンポーネントは、サーバーコンポーネントをインポートできないという制約が

Guest 07:35
あるんですね。はい、サーバーでしかレンダリングできないコンポーネントをクライアントでレンダリングすることはもちろんできないので。

Guest 07:42
その代わりにクライアントコンポーネントの中でも使いたいようなコンポーネント

Guest 07:49
は、シェアードコンポーネントにしてあげることで、このサーバーとクライアント、両方でもレンダリングできるようになるので、

Guest 07:57
まより良いかなと思います。なので、共通的共通のコンポーネントとかは、シアドコンポーネントに積極的にしちゃってもいいのかなと思ってます。

Guest 08:08
あ、ありがとうございます

Guest 08:09
はいはい、この辺はでも、全然まだ僕が。でも、ちょっと触ったくらいで思った感じなので、実際にはいね。使っていく

Guest 08:18
ことになったら、また新しい使い分けの方法みたいなのが出てくるかなと思いますが。

Guest 08:24
そうですね、まあ、多分そもそも実装値、実装、実装は終わってるのかもしれないですけど、だいぶま模索段階っていう感じなんで、まうですね、

Guest 08:33
みんなでこう、ベストプラクティスを見つけていきたいですね。うん、

Guest 08:39
そうですね、

Guest 08:41
じゃあ、リアクトサーバーコンポネンズがまできた理由について、ちょっと聞いてみたいんですけど、も、もし

Guest 08:48
なんて言うんですかね。こう、こういうことができますよ、みたいなのがありましたら、ちょっと教えていただけますか。

Guest 08:55
はい、そうですね、リアクトサーバーコンポーネンツが解決したい問題というのが、

Guest 09:02
今までクライアントでマウントされたさ。コンポーネントたちがまた遊説、フェクトフックの中で

Guest 09:11
必要なデータのフェッチリクエストを送るみたいな実装が普通だったのかなと思うんですけれど、そうした時って、

Guest 09:20
クライアントに1回コンポーネントのスクリプトが送信された後に、

Guest 09:26
またAPIに対してリクエストするというこの0天使が結構大きかったという問題が

Guest 09:32
ありますが、これをリアクトサーバーコンポーネンツによって解決することができます。

Guest 09:39
なので、リアクトサーバーコンポーネンツの恩恵っていうのが、主にそういった0.cとかのパフォーマンス面になりますね。

Guest 09:50
なので、リアクトサーバー、コンポーネンツで得られる恩恵というのは、えーデータフェッチをサーバ上で直接。え

Guest 09:59
ま、つまり、サーバーコンポーネントはサーバーでレンダリングされるので、サーバーからサーバーへ直接

Guest 10:06
データのフェッチができるので、ベテンシーがかなり抑えられます。っていうのが1番大きいかなと思います。

Guest 10:14
他にも、サーバーコンポーネントはサーバーでしかレンダリングされないので、あの、クライアントにスクリプトをダウンロードさせる必要が

Guest 10:23
ないので、バンドルに含まれないコードスプリッティングが勝手にやら行われるみたいな。そういったメリットもありますね。

Guest 10:31
うん、あ、なるほど、ありがとうございます。そうですね、

Guest 10:37
1回そのクライアントサイドで、エットリンダリングするっていう今までの方法だとま、確かにそのなんていうんですか。1往復

Guest 10:46
少なくなるって感じですかね。イメージ的には、そのAPIを呼び出して、まあ

Guest 10:52
また新しくヘッドレンダリングするっていうステップが1個減るっていうことが、まあ、そこがパフォーマンス面でいいっていう。なんか結構

Guest 11:02
うん、あの、そこだけ聞くとちょっと昔ながらの感じですよね。そのテンプレートエンジみたいな、そのサーバーさそうですね。うん、

Guest 11:10
確かにほんとそうですよね。と言っても、実際今のところのリアクトサーバーコンポーネンツだと、

Guest 11:16
1度クライアントにリアクトコンポーネントルートとなるコンポーネントがマウントされた後に、APIリクエストを行っているので、

Guest 11:25
さ、同じサーバー上にあるAPIはいを叩くので、つまりAPIにリクエストする

Guest 11:35
この0天使がはいえ、サーバーコンポーネントのレンダリングのAPI

Guest 11:42
を叩く0、天使と同じ場合は結局0天使変わらないっていうのはありますね。

Guest 11:49
そうですね、はい、あのまその呼び出し元が変わるっていうことですよね。ま、もちろん、その同じ場所で、そのAPIとまあ、リトのサーバー

Guest 11:58
があの同じとこでまホストされてたらま。それはもちろん、そちらの方が早いっていうことです。

Guest 12:04
そうですね、

Guest 12:08
なので、結局い1番最初にあの1回リアクトのコンポネントをマウントしなきゃいけないので、

Guest 12:16
そんな劇的に0天使が早くなるのかって言われると、それは微妙なのかもしれないと、ちょっと思ったりもします。

Guest 12:24
まあはあれですね、思ったのは、そのまあ、そのレンダリングのに必要な結果だけ送れるっていうところとかですかね。はい、結構

Guest 12:34
APIとかだとそのむ使わないこの要素とか、無駄なところとか、いっぱい取ってくると思うんですけど、もま表示させるところだけ。

Guest 12:43
レンダリングして、その結果だけを返すっていう感じ。

Guest 12:49
そうですね、そこがやっぱり1番でかいかなと思います。サーバーコンポーネントが返すのは、レンダリングした結果のjsex。

Guest 12:58
おじその形で返すので。

Guest 13:03
そうですね。なので、ジ数が含まれないっていうのはも、1番でかいかなと思います。

Guest 13:08
うん、うん、うん、どこで

Guest 13:12
そうですねで、あと0点cが下がるというのは、

Guest 13:18
ま、結局、サーバーコンポーネントのレンダリング、APIを叩かなきゃいけないので、そこのネットワークコストっていうのは、なんかあんま変わらないのかなとは思うんですが、

Guest 13:27
例えば、コン親コンポーネントがデータフェッチが終わって、コンポーネントがレンダリングされるような場合に

Guest 13:36
のココンポーネントの有説フェクトの中でフェッチ新しく取ってる場合、

Guest 13:42
こうエアコンポーネントレンダリングが終われ、終わらないと、そのココンポーネントのれん。フェッチが

Guest 13:49
始まらないじゃないですか。はいはいはい、こういうなんかこう滝みたいなだんだんになって、このここを解消できるという

Guest 13:57
メリットがあります。コンポーネントなので、親コンポーネントの

Guest 14:04
リクエストに係るこの0点シの部分がサーバー上で行なえるので、

Guest 14:09
かなり短くなるので、ま、ウォーターフォール自体は消えないんですけど、すごくその高さがないようなウォーターフォールになるので、改善される

Guest 14:18
みたいな話がありますね。

Guest 14:20
そうですね、そのだ、そのウォーターフォローの回数だけやり取りややってる今までの方法とは全然

Guest 14:29
うん、うん、

Guest 14:30
ま、最も直列。そのような疾走をするのは、アンチパターンなので、

Guest 14:35
やらないかもしれないのですが。まあ、これからは気にしなくても良くなるみたいなのが、その方がその

Guest 14:43
ま上流の方で、一気にフェチして、みたいなことを考えなくても済むようになるので、そこはまたオッケーですよね。いいところだと思います、

Guest 14:52
なるほど、ありがとうございますはい

3. Server Side Renderingとの違い 14:57

Guest 14:57
っていう感じでま。色んなま主に速度面のメリットがある。逆と、サーバーコンポーネンツなんですけども。

Guest 15:04
まあ、ここからちょっとその勉強会で出た質問について、ちょっと聞いてみたいと思います。1つ目なんですけれども、

Guest 15:13
サーバーサイドレンダリング

Guest 15:16
とうんうん、今、あの一見違いが分からないっていう意見があったりします。というのも、まあまあサーバーサイド

Guest 15:24
レンダリングってままさしくそサーバーサイドでレンダリングするっていう言葉で比べると、全く一緒のか聞こえるんですけれども

Guest 15:33
まこれとは違うんですよね、今回の

Guest 15:37
そうなんです実はもう名前的にはもうほぼ同じようなもんそうみたいな感じはあるんですが、

Guest 15:43
既存のssr、例えば、ネクストjsとかで実現できるものって、

Guest 15:49
やり。解決する問題というのは、初期表示を早くするっていう早くしたいという問題で。

Guest 15:57
なので、ssr行った結果がhtmlになって、初期表示を早くしようとか、あと、seoを良くしようみたいな

Guest 16:06
ものだと思うんですが、リアクトサーバコンポーネンツは、1番初めに返されるものは、

Guest 16:14
ただの略。トコンポネト従来の略とアプリとかなら変わらないので、初期表示は早くならないんですね。

Guest 16:23
なので、ssrとリアクトサーバーコンポーネンツの担当領域って、全然違う

Guest 16:29
実は全然違うものなんです。なので、え、この今までのssrとリアとサーバーコンポーネンツは組み合わせることができて、

Guest 16:38
ssrでレンダリングされた結果を表示しつつ、その裏でサーバーコンポーネンツにレンダリングリクエストを送って、

Guest 16:47
で、サーバーコンポーネンツのこのまた違うバンドルサイズが減るとか、0テcが減るとか、コードスプリッティングが自動化されるみたいなメリットを受けられるっていう。

Guest 16:58
このssrと、サーバーコンポーネンツのコンボみたいなのが、これから主流になっていくのかなと思って

Guest 17:04
ます。そうなんですよ、結構あのサーバーサイドレンダリングだと、まあ、

Guest 17:11
その帰ってくる形としては、その最初のhtmだけで、それ以降はま、一般的な

Guest 17:18
リア友の。まあ、実装って感じなんですけど、もうサーバーコンポーレンズは、これも。あの、勉強会の中でちょっとみんなで見ていったりしてたんですけども、そのま実態としては

Guest 17:33
ジェイソンなんですよね、ジェイソンはいんにそうです。そうですね、近いポイントでかま

Guest 17:40
それが、サーバーサイドでレンダリングされて帰ってくる。しかもま、それが

Guest 17:45
どのタイミングでも、そのしょ初期表示だけじゃなくて、まよどのタイミタイミングでもやってくるっていうことで、うんうん、できるっていうところで。

Guest 17:55
そうですね、目的がなんか違いますよね。うん、

Guest 17:58
そうですね、

Guest 18:00
結局ssrしたところで、ハイドレーションで、全部のコンポーネント。結局ダウンロードしてマウントするので、え、サーバーコンポーネンツの場合だと、その必要がないので、

Guest 18:12
また全然違う挙動になりますね。うん、うん、うん、そこも面白いところです、

Guest 18:17
ありがとうございます。いや、もう1つのま質問っていうか、

4. これまでの技術との違い 18:21

Guest 18:25
なんて言うんすか。感想っていう感じだったと思うんですけど、結構なんすかね。thpみたいだなみたいな感想を持ったり、うん

Guest 18:34
人とかも多くて、で、まあ、結構まさっきも話があったと思うんですけど、なんかちょっと先祖帰りみたいな

Guest 18:43
感じがあったりとか。まあ、リアトって元々そういうのを解決するために、あの

Guest 18:50
できたんじゃない。っていう疑問を持った人もいました。なんか、そもそもサーバーそういうクライアントサイドで、全部モテモテるっていうメリットを、

Guest 19:01
今、それをあのサーバーさに持っていく理由っていうのが、まあ聞いてみたいっていう人もいたと思います。

Guest 19:11
で、まあ、私もな。確かになんか、そのリアクトってそういうのの

Guest 19:20
なんて言うんですかね。アンチパターンを解決するためだけではないと思うんですけど、そういうのが目的だったと思うんですけども。まあ、それが

Guest 19:28
今こういう感じで、そのサーバーサイズの領域に踏み込むっていうところは、なんか面白いですしま。それだけそのリアクトがもう

Guest 19:39
デファクトディファクトっていうか、なんかこう普及した感があるのかなっていう思いがありますけれども、結構

Guest 19:49
どどういう感じですかね。ま、使い心地とかも聞いてみたいんですけど、どう思いました。やと、サーバーコンポーネン。

Guest 19:58
そうっすね、実際のところマジでそうだと思います。今までのテンプレートエンジン的な書き方、

Guest 20:07
似たような書き方になるのかなと思います。うん、それは、やっぱりアクトが普及して構築したエコシステムの中で、

Guest 20:16
今までのphpとかのこうメリットっていうのがを略と教授したいみたいな。

Guest 20:24
このハイブリッド型みたいな感じになるんですかね。それはそれでいいのかなと思いますけど、

Guest 20:31
そうですよね、ま、ただ、もちろんその

Guest 20:34
なんて言うんですかね。その仕組み自体は仕組み仕組みっていうか、その実現する手段自体は全然なんかまだそうですかね。ですよね、

Guest 20:42
全然違いますね、うん、やっぱ返されるのはjsxっていうのがやっぱ全然違いますよね、phpとかと

Guest 20:50
そうですよね、うん、今まではなんではい、

Guest 20:53
そうですね。やっぱこのspaspaではあり続けつつ、

Guest 21:00
サーバーでレンダリングできるっていうここが

Guest 21:05
またphpとはまた違うところですよね。うんうん、画面がフラッシュせずにページ遷移できるし、

Guest 21:14
データフェッチはサーバーで行えるし、のありますよね。ああ、確かに

Guest 21:21
今までのphpみたいな感じで、サーバーを立てる必要があるので、ま。今はフロンバックエンドフォーフロントエンドみたいな

Guest 21:31
のを立てるのが主流になってきてはいるので、今は、ネクストジェースのサーバーも立ってるところだったら、このサーバーコンポーネンツのレンダリングの

Guest 21:41
APIもはやせるのかなと思いますし、そう確かにそうです。

Guest 21:46
確かにそうですね、そこのコストはあると思います。

Guest 21:52
そうですよ、まあ、逆とまあ、そのネクストが登場する以前は、ほんとに

Guest 21:56
フロントインドだけだったと思うんですけど、ま、そういう確かにネクストリースの存在も大きいかもしれないですね。そういうサーバーサイト

Guest 22:05
ので、動かすっていう下地があったからこそ、まにしても、サーバーコップにてたのかも。

Guest 22:13
そうですね、確かにそうですよね、ネクストジーとかのssr。あ、そっからちょっとサーバーに回帰しようという動き

Guest 22:22
ありますもんね。

Guest 22:25
うん、うん、うん、

Guest 22:31
じゃあ、あ、もう1つはい話題がありましたね。リアクトフェッチのあ、はいは

5. react-fetchについて 22:32

Guest 22:40
そうですね、

Guest 22:41
出てたと思います。や、タッチについてなんですけど、も、ま、あのま、

Guest 22:49
今回のサーバーコンポレンズに直接関連するんですかね。ま、そのサーバーコンポーネントとま併用して

Guest 22:56
使うことが多分目的で。リアクトが公式でフィッチライブやりを作っているっていうものがあります。で、リア

Guest 23:05
もうリアクトの本家のリポジとのパッケージの図の下に、リアクトフェッジっていうリポジトリができていて、ま、これを

Guest 23:13
今後使われていくのかなっていう話がっていましたでど、どうですかね、なんか、紹介とかできますか。

Guest 23:21
はい、そうですね、リアクトフェッチっていう、今、ご説明いただいたようなライブラリーがありまして、

Guest 23:29
これはどちらかというと、サーバーコンポーネンツというよりも、コンカレントモード対応っていう方

Guest 23:36
は行った方がいいのかな、というのがあります。リアクトフェッチっていうのは、

Guest 23:43
サーバーコンポーネンツのデモソース見ていただいた方ならわかるかなと思うんですが、このコンポーネント。

Guest 23:50
ファンクショナルコンポーネントの中で、直接フェッチ関数を呼んで、で、あたかも同期的な関数かのように、

Guest 24:00
扱えるっていうのが特徴です。あの、コンカレントモードって、関数の中で

Guest 24:10
プロミスをスローしたら、サスペンドするっていう。そういう仕様なんですが、リアクトフェッチの

Guest 24:18
ライブラリーが提供する関数、フィッチ関数を使った場合

Guest 24:22
ま、フェッチによって、リクエストが飛んだ瞬間にプロミスをスローしてくれるんですね。ライブラリの中でなので、そこでサスペンドが落ち落ちて、

Guest 24:33
で、そのプロミスが解決次第。あの、リアクトのコンカレントモードの機能によって、リレンダリングが走って、で、ちゃんと

Guest 24:41
取得済みのデータが渡ってきて、レンダリングがちゃんと行われるみたいな、そんなライブラリーです。

Guest 24:49
はい、そうですね、ありがとうございますなんかこれ

Guest 24:52
すごい。あの、紹介された時にすごいみんなこれを絶賛してて、私もすごい

Guest 24:59
これ。あの。これを使えさえすれば、そのコンポンレントが自動的にコンカレントモードに対応できるみたいな形に。

Guest 25:08
そうですね。そうです、すごい

Guest 25:11
頭のいいライブやりはあります。で、結構

Guest 25:18
いやこれ頭いいっていうか、もしかしたらこれを浮きして、コンカレントモードを作っていた。

Guest 25:25
もしや、実際のところ多分マジでこれを理想として作ってたんだろうなっていうのがありますよね。そうですよね、なんかうん、

Guest 25:33
できすぎてますよね、や、

Guest 25:35
ほんとそうですよね、

Guest 25:37
うん

Guest 25:38
はあ、そうそうそう

Guest 25:44
まコンカレントモードの話が出たと思うんですけど、

Guest 25:48
はい、

Guest 25:49
サーバーコンポレンズはま、コンカレントも。だから、その正式リリースした後って感じですよね。ま、そうですね、

Guest 25:58
それは間違いないと思います。やっぱ、コンカレントモードと

Guest 26:02
コンカレントモードがあってこそのサーバーコンポーネントっていうのが、あ、あ、はいあると思うので、やっぱりコンカレントモード前提でもう作られているので、コンカレントモードが来てから、サーバーコンポーネントが来るんじゃないかなと

Guest 26:15
思ってます。

Guest 26:16
なるほど、でまこのサーバーコンポーレンスが来た赤にはこう。逆と、ペッチがこう思いを振るという

Guest 26:24
そうですね。

Guest 26:26
おそらく、コンカレントモードがリリースされると同時に、このリアクトフェッチもリリースされるんじゃないかなと。ちょっと思ってるんですけれど。

Guest 26:35
というのも、リアクトフィッチはクライントでも使えるので。

Guest 26:40
うん、うん、うん

Guest 26:41
ああそっかまのリアトフィッチ自体はりサーバコンポーレンズとは関係ない

Guest 26:46
そうですね。なので、まあ、もちろん、サーバーコンポーネントと組み合わせることによって、もっと毛を振るとは思うんですが、はなかなか面白い。

Guest 26:57
いや、なんかそうこうあれですね、手手のひらの上で踊らされてる感が

Guest 27:04
そうですよね。おい、今までリアクトはなんかこう色んなもの、ライブラリー更新のライブラリーを提供しな。ここなかった。なんか、サーバス

Guest 27:14
サードパーティのライブラリ結構使ってたと思うんですけども、まさか、フェチライブラリまで、リアクト公式になるとは思ってなかったですが、

Guest 27:23
確かにただまだ結構リアクトフェッチ。まだ叩き上げっていう感じで、まだ色々問題もあるのかなと思ってて、

Guest 27:32
そこらへんがまた今後どう解決されていくかっていうのも気になるところですね。

Guest 27:38
1つの問題としては、あのリアクトフェッチが。コンカレントモードに対応するために、urlをキにキャッシュしちゃってるんですよね。はいはい。

Guest 27:49
なので、クライアント上でリアとフェッチを実行してしまった場合、この再リクエストを行えなくなってしまう

Guest 27:58
です。

Guest 27:59
なので、それをま今だったら、まあ、例えばurlを変えるとか、そういうワーカーランドがあると思うんですが、ま、もっと直感的な。

Guest 28:09
例えば、パージするメソットが

Guest 28:13
なるほど、そんな感じのまた、設計が変わってくるのかなと思いますので、もっと使いやすいライブラリになってくれると思います。

Guest 28:22
そうですね、なんか、類似のライブでは、大体こう気を変えて対応してるみたいな感じですけど、そういうAPIでの余地は

Guest 28:31
ありますね。うん、ただ、素養としてはもう完璧な感じがしますね。

Guest 28:39
そうですね、これはもうかなり僕らが求めていたものみたいなところありますよね、感動しますこれは

Guest 28:48
ありがとうございます

6. クロージング 28:52

Guest 28:55
はいえ、今回はヤクトサーバーコンポーニについについて、え、セスさんにお話を伺いました。

Guest 29:02
LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。

Guest 29:08
UIT INSIDEメ会にも、今回のような逆トサーバー、コンポリンスについてなど色々な勉強について、え、社内勉強会で

Guest 29:17
え行っております。今後も、UIT INSIDEを通して、このような情報を外部に発信していけたらと思います。

Guest 29:25
最後に、現在LINE株式会社では、新卒、中途採用ともに大募集しています。

Guest 29:32
このポットキャストを聞いて、来日を持たれましたら、小納と1番下にある求人ページから、ぜひアクセスしてください。それではセスさん、

Guest 29:41
ありがとうございました、

Guest 29:43
ありがとうございました。