mu-suke

<h2 id="%E3%82%B4%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B4%E3%83%BC%E3%83%AB" aria-hidden="true"></a> ゴール</h2>
<ul>
<li>React v18で導入されたSuspenseについてどういう場面で使用するのかをざっくり把握できること</li>
<li>今開発しているprjに導入できること</li>
</ul>
<h2 id="%E8%AA%B2%E9%A1%8C%E7%82%B9">
<a class="header-anchor-link" href="#%E8%AA%B2%E9%A1%8C%E7%82%B9" aria-hidden="true"></a> 課題点</h2>
<ul>
<li>Suspenseがなんなのかざっくりと理解できていない</li>
<li>Next.js x URQLでどうやって使うのか理解できていない</li>
</ul>
<h2 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<table>
<thead>
<tr>
<th>ツール・ライブラリ</th>
<th>用途</th>
<th>バージョン</th>
</tr>
</thead>
<tbody>
<tr>
<td>Next.js</td>
<td>フロントエンドとして利用</td>
<td>12.1.6</td>
</tr>
<tr>
<td>NestJS</td>
<td>サーバーサイドとして利用</td>
<td>8.0.0</td>
</tr>
<tr>
<td>GraphQL Code Generator</td>
<td>コード自動生成ツール</td>
<td>2.6.2</td>
</tr>
<tr>
<td>URQL</td>
<td>GraphQL Clientのライブラリ</td>
<td>2.2.0</td>
</tr>
<tr>
<td>node.js</td>
<td>フロント、サーバーサイドの実行環境</td>
<td>v16.14.0</td>
</tr>
</tbody>
</table>


<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__67cc4e02f0498" src="https://embed.zenn.studio/card#zenn-embedded__67cc4e02f0498" data-content="https%3A%2F%2Fqiita.com%2Fuhyo%2Fitems%2Fbbc22022fe846fd2b763" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/uhyo/items/bbc22022fe846fd2b763" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/uhyo/items/bbc22022fe846fd2b763</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7fd1232df43e1" src="https://embed.zenn.studio/card#zenn-embedded__7fd1232df43e1" data-content="https%3A%2F%2Fzenn.dev%2Fshinbey%2Farticles%2F8acce14b8b60e3" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/shinbey/articles/8acce14b8b60e3" style="display:none" target="_blank">https://zenn.dev/shinbey/articles/8acce14b8b60e3</a></p>
<p>概要を理解する上でこの記事が読みやすかった</p>


ツール・ライブラリ	用途	バージョン
Next.js	フロントエンドとして利用	12.1.6
NestJS	サーバーサイドとして利用	8.0.0
GraphQL Code Generator	コード自動生成ツール	2.6.2
URQL	GraphQL Clientのライブラリ	2.2.0
node.js	フロント、サーバーサイドの実行環境	v16.14.0