フロントエンドエンジニアの茶木です。 Next.js におけるレスポンシブ、PC/SPの出し分けについてSSRの観点も含めて考察します。 具体的には、以下の切り替えについて、どのように実現するかについての考察です。 スタイリングの切り替え要素自体の描画を行うかどうかはじめにサーバーサイドレンダリング(SSR)Next.js はサーバーサイドレンダリング(SSR)をサポートしています。 SSRは、サーバー側で HTML を生成し、クライアントに返し表示することで、初期表示の高速化を実現します。 Next.js では、SSRは、クライアントサイドレンダリング(CSR)と混在させられます。基本的には SSRでレンダリングするべきなのですが、サーバーサイドで行えない、クライアントに依存した動的な表示を行う場合が存在します。 PC/SPの出し分け踏まえて、PC/SP の出し分けの判定について考えます
![Next.js における レスポンシブの考察](https://cdn-ak-scissors.b.st-hatena.com/image/square/62e9d6bc65e09f2a80a767eec43f116ffcf4a39d/height=288;version=1;width=512/https%3A%2F%2Fwp.gaji.jp%2Fwp-content%2Fuploads%2F2023%2F09%2Ffirmbee-com-SpVHcbuKi6E-unsplash-scaled.jpg)