Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

SSR+SPA

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sigma Sigma
October 10, 2022
Programming
170
0

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022

More Decks by Sigma

See All by Sigma
Proxmox_VE.pdf
Avatar for Sigma seiyasugimoto
0
230
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
150
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
120
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
110
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
94
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
89
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
76
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
100
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
100

Other Decks in Programming

See All in Programming
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
360
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
240
TiDB Cloudのカスタムコントローラーによるオートスケール対応
Avatar for takaidohigasi takaidohigasi
0
120
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
190
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
2.7k
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
140
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
Avatar for MagicPod magicpod
0
210
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
620
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
400
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
370
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
0
120

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
520
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
370
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
330
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
14k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
830
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M

Transcript

  1. SSR+SPA Nuxt+Vuex

  2. SSR(+SPA) とは • SSR とは ◦ サーバーサイドレンダリングの略。 クライアントサイド（SPA）と サーバーサイ ドの

    HTMLレンダリングを 併用しユーザー体験を向 上させることを指す。

  3. 冷静に考えるととんでもないことをやってる • サービス内の別のページからリンクすると クライアントサイドで レンダリングされる。 • そのページをF5を押して再読み込みすると サーバーサイドでレ ンダリングされる …

    は？

  4. なんでそんなクソ面倒くさいことを？ • サーバーサイドでレンダリングするならテンプレートエンジンを使った昔ながらの 方法でやれば良いじゃない。 • SPAが必要なほど複雑なフロントエンドで、OGPのクローラの面倒を見たりSNS でシェアされた際のファーストビューの速さが問題になる要件そうそう無いで しょ。 つい先日あった

  5. Nuxtで対応 • NuxtにはSSRサポートがある これで勝つる わけなかった

  6. 案件当時の標準的なNuxtプロジェクト • Nuxt + TypeScript を実現するために外部ライブラリを使う ◦ nuxt-property-decorator ( vue-property-decorator

    ) ◦ vuex-module-decorator • vuex-module-decorator の issue にとんでもないコメントを見つけてしまう。 ◦ https://github.com/championswimmer/vuex-module-decorators/issues/146#issuecomm ent-515269904

  7. SSRのバグのソリューションを探った 結果、getModule() に根深い問題が ありそう。 このリポジトリは大規 模なオーバーホール 無しではSSRでは使 えない。

  8. 終わった……

  9. None

  10. Readmeに書いてある おまじないの意味を知る

  11. exportしてるpluginsがキモ getModule()しているのがポイント

  12. I GOT KOTONAKI……