# SSR (Server Side Rendering)
- 狭義
- ClientとServerで共通のロジックでHTMLをレンダリング
- メリット
- SEO
- Googleの中の人
- AngularやReactでプリレンダリング (SSR) 推奨
- 動的なOGP対応
- パフォーマンス
- First View Performance
- 流れ
- Navigation Start
- First Paint
- First Contentful Paint
- First Meaningful Paint 👈ここまで
- Visual Ready
- Time To Interactive (JS loaded)
- Fully Loaded (all resources loaded)
- First Contentful PaintとFirst Meaningful Paintの間を短縮
- SSRすることで
- 課題
- CPU負荷が高い
- [[Node.js]]
- メインループをブロックしてしまうことが多い
- AngularもReactも
- Reactは次バージョンで対応？（2017時点）
- 対策
- 諸刃の剣
- HTMLをキャッシュ
- コントロールむずい
- above the fold
- スクロール不要な範囲のみレンダリング
- SEO保証されない
- サービスの特性次第ではSSR不要
- [[Nuxt.js]]
- [[Vue.js]]
- ブラックボックス感
- [[Next.js]]
- GraphQLなしで良ければGatsbyでできることすべてできる
- 要件によってSSGとSSRを使い分けられる
- SSGは9.3から
- 10.0.3ではSSG推奨
- 切り替えはビルド時に自動判断
- Reactベース
- 拡張性・自由度が高い
- Webpackを内容・隠蔽
- APIエンドポイント機能を標準搭載
- 機能
- bundle
- compile
- routing
- ファイルベース
- 画像サイズ最適化
- zero config
- etc.
- ブラックボックス感少ない
- デプロイ
- Vercel
- リバースプロキシ
- 静的リソース
- API
- API Routing
- 貧弱
- 対応
- NextJS
- サーバーサイドNode.jsに特化
- Blitz.js
- [[Next.js]] を拡張
- + prisma
- ORM
- 一強
- inspired by RoR
- Fullstack Framework
- Zero-API Data Layer
- import server code directly into React components
- RDBMSとの相性が悪い
- [[Next.js]]
- サーバーレスファンクション
- 大量にスケールアウト
- RDBMS
- コネクション数の制限
- Custom Serverを避ける
- Express.jsから [[Next.js]] を利用
- 非推奨
- SSGと相性が悪い
- Reduxお勧めしない
- シンプルにjotai
- 攻めるならRecoil
- TypeScript
- zeit/ext-typescript
- トランスパイルにBabelを利用
- TypeScriptコンパイラによる型チェックが行われない
- 自力でWebpackをカスタマイズ
- いくつか制約あり
- [[MySQL]]
- with-mysql template
- [[AWS]]
- aws-serverless-express
- AWS公式
- LambdaでNext.js on Expressを稼働
- バックエンド
- Express.js
- たぶん
- Custom Server
- 単独
- [[Next.js]] のSSRのフルポテンシャル発揮できない
- next-connector
- The smol method routing and middleware for [Next.js](https://nextjs.org/) (also works in [other frameworks](https://github.com/hoangvvo/next-connect#using-in-other-frameworks)). Powered by [trouter](https://github.com/lukeed/trouter).
- Compatible with Express.js
- Lightweight
- 5x faster than Express.js with no overhead
- Works with async handlers (with error catching)
- TypeScript support